1. 自動綁定 (事件綁定)

綁定this: React為什么要這么做?

• 是js中this綁定方式決定的，和react工作方式無關。
• 函數處理, 是作為回調傳遞的，這樣就會丟失了上下文, 所以this為 undefined
• this不是默認指向在全局的嗎? 在嚴格模式下Strict mode, 就是個undefined, 不嚴格模式為全局

// 三種方式 // 1. 構造器綁定 constructor (props) {super(props)this.handleClick3 = this.handleClick3.bind(this)}// 2. 箭頭函數 <button onClick={() => this.handleClick2()}>// 3. bind方式 <button onClick={this.handleClick4.bind(this)}>

2. 為什么要綁定this?

LIN.JY666：[JS基礎] 7 - this, call/apply/bind/箭頭函數?zhuanlan.zhihu.com

• 如果是個函數調用，那么this指向函數內部，如果是非嚴格模式，那么this指向window
• 如果是個對象里的函數調用，那么this指向該對象
• this要等到執行的時候，才確定是什么。

為了綁定當前執行的環境, 當前執行的作用域

const object = {name: '123',fn: function () {// 隱式綁定console.log('this.name', this.name)} } const name = 'test'// 1. ? object.fn() // 返回'123' 對象里的函數調用, this指向該對象// 2. ? objFn = object.fn objFn() // 返回 test 函數調用，那么this指向函數內部，如果是非嚴格模式，那么this指向window// 3. 綁定, object.fn的this 使用object內部 objFnn = object.fn.bind(object) objFnn() // '123'

總結

以上是生活随笔為你收集整理的spinbox 上下箭头事件_[React] 3 - 自动绑定 (事件绑定)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。