資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟
心理學
社會科學
時尚研究
法律研究處理 React.js 中的事件
在書寫事件時存在一些語法差異，但其處理方式類似於 DOM 元素事件處理。
事件處理程式的名稱採用駝峰命名法。
示例
簡單 html 中的事件 −
<button onclick=”addUser()”>
Add User
</button>
Event in React with jsx:
<button onClick={ addUser }>
Add User
</button>其中一個不同點是我們不寫 return false 來防止 React 中的預設行為。相反，我們具體寫event.preventDefault()
示例
在簡單 Html 中 −
<button onclick=”console.log(‘Add user event clicked’); return false;”> Add User </button>
在 React 中將被寫為 −
function addUser(event){
event.preventDefault();
console.log(‘Add user event clicked’);
}
<button onClick={ addUser }>
Add User
</button>此處在 React 中傳遞的事件是合成的且跨瀏覽器相容的。ES6 中的一個方法可以是一個事件處理程式。在 JavaScript 類中，預設情況下方法與類沒有繫結。類中這些方法應在建構函式中宣告，繫結如下所示 −
constructor(props){
super(props);
this.addUser=this.addUser.bind(this);
}或者，我們可以使用箭頭函式，它將自動繫結方法，然後無需在建構函式中新增繫結。
adduser=()=>{
}如果我們不使用箭頭函式，另一個備選方案是呼叫該方法並在 React 元素本身上進行繫結 −
addUser(){
}
<button onClick={ (e)=>{this.addUser(e)}}>
Add User
</button>上述匿名回撥函式存在的問題是，它將在按鈕每次在螢幕上呈現時建立，並且會影響效能。
將引數傳遞給事件處理程式
<button onClick={ (e)=>this.addUser(id, e) }></button>或者
<button onClick={ this.addUser.bind(this, id) }></button>在上面的事件處理程式中，我們傳遞 id 作為引數，將事件物件作為第二個引數。事件引數在箭頭函式中可見，但在第二種方法中，它被隱式傳遞，因此我們沒有提供它。
更新於：2019-08-28
498 次瀏覽
廣告