問題描述

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

想不明白這里的this綁定

問題解答

因?yàn)樵赾lass中聲明函數(shù)，并不會(huì)自動(dòng)綁定this對象

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

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

所以，onClick調(diào)用的時(shí)候，handleEvent中的this會(huì)是undefined（根據(jù)文檔）

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

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

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

因?yàn)閔andleEvent中this.setState...的this并沒有綁定this

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

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