0 聯絡我

1.Java開發技術交流Q群

2.完整部落格連結

3.個人知乎

4.gayhub

React 元素的事件處理和 DOM元素的很相似。但是有一點語法上的不同:

React事件繫結屬性的命名採用駝峰式寫法，而不是小寫。
如果採用 JSX 的語法你需要傳入一個函式作為事件處理函式，而不是一個字串(DOM元素的寫法)
例如，傳統的 HTML：

React 中稍稍有點不同

在 React 中另一個不同是你不能使用返回 false 的方式阻止預設行為。你必須明確的使用 preventDefault。例如，傳統的 HTML 中阻止連結預設開啟一個新頁面，你可以這樣寫：

在 React，應該這樣來寫

在這裡，e 是一個合成事件。React 根據 W3C spec 來定義這些合成事件，所以你不需要擔心跨瀏覽器的相容性問題。檢視 SyntheticEvent 參考指南來了解更多。

使用 React 的時候通常你不需要使用 addEventListener 為一個已建立的 DOM 元素新增監聽器。你僅僅需要在這個元素初始渲染的時候提供一個監聽器。

• 當使用 ES6 class 語法來定義一個元件的時候，事件處理器會成為類的一個方法.
  例如，下面的 Toggle 元件渲染一個讓使用者切換開關狀態的按鈕：
  
  

必須謹慎對待 JSX 回撥函式中的 this，類的方法預設是不會繫結this 的.
如果你忘記繫結 this.handleClick 並把它傳入 onClick, 當你呼叫這個函式的時候 this 的值會是 undefined.

這並不是 React 的特殊行為；它是函式如何在 JavaScript 中執行的一部分。通常情況下，如果你沒有在方法後面新增 () ，例如 onClick={this.handleClick}，你應該為這個方法繫結 this。

如果使用 bind 讓你很煩，這裡有兩種方式可以解決。如果你正在使用實驗性的屬性初始化器語法，你可以使用屬性初始化器來正確的繫結回撥函式：