javascript - Composant liant ceci dans React

Question

<button onClick={this.handleEvent}>    //这里的this是toggle组件 为什么还需要在组件里绑定这个函数的this 
  {this.state.isToggleOn === true ? 'on' : 'off'}
</button>

Je n'arrive pas à comprendre la reliure de ceci ici

Answer 1

Parce que dans class中声明函数，并不会自动绑定thisobjet

Alors, quand vous l'êtes onClick={this.handleEvent}, décomposez-le en deux étapes et vous comprendrez :

let handleEvent = this.handleEvent;
...onClick={handleEvent}...

Donc, onClick调用的时候，handleEvent中的this会是undefined (selon la documentation)

Donc, ce dont vous avez besoinbind一下, 那么里面的thisc'est le composant actuel.

Il existe également un moyen pratique de l'écrire, qui consiste à le déclarer avec une fonction flèche :

handleEvent = (e)=>{

}

render(){
  ...onClick={this.handleEvent}...
}

Answer 2

Parce que this.setState...
dans handleEvent n'est pas lié à this

Vous pouvez utiliser le sucre syntaxique des fonctions fléchées pour lier ceci

handleEvent = () => {
    this.setState...
}