React.js 實戰之 事件處理

摘要： 0 聯絡我 1. Java開發技術交流Q群 2. 完整部落格連結 3. 個人知乎 4. gayhub React 元素的事件處理和 DOM元素的很相似。但是有一點語法上的不同: React事件繫結屬性的命名採用駝峰式寫法，而不是小寫。 ...

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

  當使用 ES6 class 語法來定義一個元件的時候，事件處理器會成為類的一個方法.

  Toggle

  例如，下面的 Toggle 元件渲染一個讓使用者切換開關狀態的按鈕：

  

必須謹慎對待 JSX 回撥函式中的 this ，類的方法預設是不會繫結 this 的.

如果你忘記繫結 this.handleClick 並把它傳入 onClick , 當你呼叫這個函式的時候 this 的值會是 undefined .

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

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