javascript - React中組件綁定this

問題描述

<button onClick={this.handleEvent}> //這里的this是toggle組件 為什么還需要在組件里綁定這個函數的this {this.state.isToggleOn === true ? ’on’ : ’off’}</button>

想不明白這里的this綁定

問題解答

因為在class中聲明函數，并不會自動綁定this對象

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

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

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

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

還有一種方便的寫法，就是用箭頭函數聲明：

handleEvent = (e)=>{}render(){ ...onClick={this.handleEvent}...}回答2：

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

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

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