當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

再次强调事件绑定中this的坑

發(fā)布時間：2024/4/13 编程问答 18 豆豆

生活随笔收集整理的這篇文章主要介紹了再次强调事件绑定中this的坑小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

事件綁定中的 this 指向問題（坑）

第一種綁定方式（不做任何處理）：

this 指向 Window
默認接收一個參數(shù) event 事件源對象
不支持額外的參數(shù)傳遞

<button onClick={this.handleClick}>點擊改變 message</button>

第二種方式（bind）：

this 指向組件實例
默認接收一個參數(shù) event

<button onClick={this.handleClick.bind(this)}>點擊改變 message</button>

第二種方式還可以為方法傳遞額外參數(shù)：

手動傳遞的參數(shù)會放到函數(shù)最前面，event 會作為函數(shù)的最后一個參數(shù)

<button onClick={this.handleClick.bind(this, 123, 456)}>點擊改變 message</button>

第三種方式（箭頭函數(shù)）：

自動 bind this
手動傳遞參數(shù)
參數(shù)順序自己指定，event 也需要自己手動傳遞

<button onClick={(e) => {this.handleClick(e, 123, 456)}}>點擊改變 message</button> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>bind 函數(shù)</title> </head> <body><script>function fn(a, b, c, d, e, f) {console.log(a, b, c) // 1, 2, 3console.log(d, e, f) // 4, 5, 6}// 綁定的同時傳遞參數(shù)：預傳參，不調(diào)用// 預置參數(shù)var newFn = fn.bind(this, 1, 2, 3)// 調(diào)用的時候傳遞參數(shù)，該參數(shù)會和預傳遞的參數(shù)合并到一起作為函數(shù)參數(shù)newFn(4, 5, 6)// fn(4, 5, 6)</script> </body> </html>

總結

以上是生活随笔為你收集整理的再次强调事件绑定中this的坑的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。