javascript - React中元件綁定this

Question

#

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

想不明白這裡的this綁定

Answer 1

因為在class中宣告函數，並不會自動綁定this物件

所以，你在onClick={this.handleEvent}的時候，分解成兩步你就懂了：

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

所以，onClick調用的時候，handleEvent中的this會是undefined（根據文檔）

所以，你需要bind一下, 那麼裡面的this就是當前組件啦。

還有一個方便的寫法，就是用箭頭函數宣告：

handleEvent = (e)=>{

}

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

Answer 2

因為handleEvent中this.setState...
的this並沒有綁定this

可以採用箭頭函數的語法糖來綁定this

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