React.js 實戰之 事件處理

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 讓你很煩，這裏有兩種方式能夠解決。若是你正在使用實驗性的屬性初始化器語法，你能夠使用屬性初始化器來正確的綁定回調函數：