PIPIONE
2019-03-05 17:43:39
最近開始學(xué)習(xí)react,剛看完官方的教程TicTacToe,對(duì)onClick事件綁定的語(yǔ)法不是很理解,所以來(lái)這里提問(wèn),求大家?guī)兔獯?。下面是官方教程里的代碼:其中這一段: renderSquare(i) { return ( <Square value={this.state.squares[i]} onClick={() => this.handleClick(i)} /> ); }綁定onClick事件時(shí),為什么不直接寫成onClick={this.handleClick(i)}呢?箭頭函數(shù)等同于function() { return this.handleClick(i);}的話,那么我的理解兩種寫法應(yīng)該是等效的,但第二種貌似過(guò)不了編譯。剛?cè)腴T很多不懂,求大家解答一下,十分感謝!
2 回答

至尊寶的傳說(shuō)
TA貢獻(xiàn)1789條經(jīng)驗(yàn) 獲得超10個(gè)贊
...onClick={這里是一個(gè)函數(shù)或函數(shù)引用}
onClick={() => this.handleClick(i)}
,這里面就是一個(gè)匿名函數(shù),點(diǎn)擊事件發(fā)生時(shí),會(huì)執(zhí)行這個(gè)匿名函數(shù),匿名函數(shù)再調(diào)用handleClick函數(shù)(傳參i);其次才是this綁定的問(wèn)題

海綿寶寶撒
TA貢獻(xiàn)1809條經(jīng)驗(yàn) 獲得超8個(gè)贊
因?yàn)?a >箭頭函數(shù)不會(huì)綁定自己的this
,
如果不用箭頭函數(shù),需要手動(dòng)綁定函數(shù)的this
:onClick={() => this.handleClick.bind(this)(i)}
或者在定義的時(shí)候就用箭頭函數(shù):
handleClick = (i) => {
//do it
}
onClick = {this.handleClick}
添加回答
舉報(bào)
0/150
提交
取消