react合成事件的三種繫結方式bind

2021-08-04 06:47:35 字數 526 閱讀 7405

在使用es6 classes或者純函式時,不存在自動繫結,需要我們手動實現this的繫結。

一 bind方法。這個方法可以繫結事件處理器內的this,並可以向事件處理器中傳遞引數,例:

handleclick(e,arg)

render()

}若不傳參即可寫為

this.handleclick.bind(this)
另外stage 0草案中提供了乙個便捷的方案——雙冒號語法,例:

test

二 構造器內宣告,優點為僅需要進行一次繫結,不需要每次呼叫時去執行繫結。

constructor(props)

handleclick()

render()

} 三 箭頭函式,自動繫結了定義此函式作用域的this。

const handleclick=(e)=>

render()}或

handleclick(e)

render()>test;}}

React合成事件和jsDOM事件的區別

js事件 小寫命名 啟用按鈕 阻止預設事件點我 react合成事件 事件駝峰命名 啟用按鈕 阻止預設事件 e.preventdefault function actionlink return 點我 react事件 是乙個合成事件。使用 react 的時候通常你不需要使用 addeventliste...

React繫結this的三種方式

react可以使用react.createclass es6 classes 純函式3種方式構建元件。使用react.createclass會自動繫結每個方法的this到當前元件,但使用es6 classes或純函式時,就要靠手動繫結this了。接下來介紹react中三種繫結this的方法bind ...

事件的三種繫結方式

1.行內式繫結事件處理 另外一種寫法 functionclickme 這時候,這個函式的作用於這就這個物件本身 input 所以我們可以通過this獲取input的任何屬性。缺點 1.html與js 的耦合性高 2.在事件函式未預編譯之前,點選可能會報錯 3.這樣的事件處理程式在不同瀏覽器中的作用於...