需要繫結的原因
事件繫結目的,就是事件的作用域的轉移。
問題是,react生成出來的元件,this還不能指向自身嗎?
this.plus}>plusplus函式上的this,是事件響應時的上下文(window),並不是當前元件例項!
先來看看bind方法的定義:「bind()
方法建立乙個新的函式, 當這個新函式被呼叫時其this
置為提供的值」,什麼意思呢,看**:
var module =所以**修改為 this.plus.bind(this)之後,不過執行時的上下文是什麼,函式的內部的this,始終指向元件提供的值。}var unboundgetx =module.getx;
console.log(unboundgetx());
//呼叫的物件是window,所以裡面的this.x => window.x
//expected output: undefined
var boundgetx =unboundgetx.bind(module);
console.log(boundgetx()); // 但是bind之後,會將this的值置為module提供的值
//expected output: 42
選擇繫結方法的目的
繫結的方法有好多種,為什麼需要挑選呢?我們首先要了解到:
而react事件系統對dom進行了改進,有一套高效的事件的
的機制,得到了優秀的效果:
實現
用預設引數event來解決,如【箭頭函式-函式上】,它們會在有event引數的情況下繫結到同乙個函式上
this.handleedit.bind(this, param)}>編輯
this.handleedit(param)}>編輯
constructor(props)
const handleedit = (e) =>
this.click}>當元件的事件數量極多時,用【構造器內部宣告】方法,否則就犧牲效能來換取便捷,有引數就用【bind方法】,沒有就用【箭頭函式宣告】。這是又乙個效能與業務平衡的例子。
思考
say what來看看官方原文:
印證了那句話:vue是保時捷,react是組裝車。
需要。但是為了不破壞dom的結構,並不是直接繫結在dom上,而是通過一種快取的方式監聽資料。
React 事件繫結
一 class方式定義元件事件繫結的幾種方法 一 在建構函式中使用bind繫結this 1 class button extends react.component 6handleclick 9render 12click me 1314 15 16 二 在呼叫的時候使用bind去繫結this 1 ...
React 事件繫結
一 class方式定義元件事件繫結的幾種方法 一 在建構函式中使用bind繫結this 1 class button extends react.component 6handleclick 9render 12click me 1314 15 16 二 在呼叫的時候使用bind去繫結this 1 ...
React中繫結事件
1.事件的名稱都是react提供的,因此名稱的首字母必須大寫 onclick onmouseover 2.為事件提供的處理函式必須是如下格式 onclick 3.用的最多的事件繫結形式為 this.show 傳參 按鈕 show arg1 例如 import react from react exp...