技術標籤：spinbox 上下箭頭事件

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?

• 如果是個函式呼叫，那麼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'