Réagir Impossible de lire la propriété 'bind' undefined
Je suis coincé avec un problème que je ne comprends pas avec la liaison. J'ai essayé par tous les moyens de liaison pour toutes les questions relatives à cette question dans StackOverflow mais à chaque fois j'ai le même
D'erreur: "Réagir Impossible de lire la propriété "liaison " undefined"
Error2:"TypeError: Cannot read property '__reactInternalInstance$b7iw1elmz95', null à
Object.getClosestInstanceFromNode"
Parce que j'ai tout essayé, je me demande si c'est qu'un réel problème avec la liaison d'un problème externe.
Ce que je veux faire, c'est quand je clique sur un bouton, un autre contenu.
Voici mon code :
import React, {Component} from 'react';
export default class Projects extends Component {
constructor(){
super();
this.state = {
onShow: false,
opacity: 0,
height: 0
}
}
OnShow(){
this.setState({
onShow: !this.state.onShow,
opacity: this.state.opacity === 0 ? 1:0,
height: '100vh'
});
}
render(){
return(
<div>
<h2>blabla</h2><p>some extra blabla</p>
<button onClick={this.onShow.bind(this)}>
<div opacity={this.state.opacity}>YO</div>
</button>
</div>
);
}
}
- Une faute de frappe. Votre nom de la méthode est
OnShow
et que vous faitesthis.onShow
Vous devez vous connecter pour publier un commentaire.
Il y a une faute de frappe dans le onClick sur le bouton:
this.OnShow.bind(this)
est la bonne façon.Fonction est nommée OnShow, l'état de la var est nommé onShow
Tout d'abord, il y a une faute de frappe dans votre nom de la fonction d'appel.
Mais aussi, au lieu de saisir manuellement la liaison ce, je voudrais vous recommandons de laisser la JS faire la liaison automatiquement, à l'aide d'un La Flèche De La Fonction syntaxe :
Il est plus élégant et vous fait gagner du temps.
C'est une faute de frappe erreur :
Fonction d'origine est :
Donc , s'il vous Plaît changer :
À partir de :
À :