[官網學 React] Docs：事件處理

網址（英文）：https://reactjs.org/docs/handling-events.html
網址（中文）：https://zh-hant.reactjs.org/docs/handling-events.html

這一篇學到許多有關 this 的運用，和要注意的地方。

在 React 的事件處理表示方式與 HTML 的不同之處：

HTML 是 string，React 是函式。

另一個不同是，在 React 不能透過回傳 false避免預設行為。

必須明確地呼叫 preventDefault：

這裡的 e 是一個 SyntheticEvent，React 是依據 W3C spec 定義，所以不用擔心跨瀏覽器的相容問題。

使用 React 通常不需透過呼叫 addEventListener 在建立好的 DOM 上加一個監聽器，只要在 HTML 元素初次渲染時提供一個監聽器。

當使用 ES6 class 定義 Component 時，常見的模式是把 event handler 當成那個 class 的方法：

Try it on CodePen

＊必須小心在 JSX callbacks 裡的 this 定義。

在 JavaScript，class 的方法沒有預設綁定，所以若沒有綁定（bind） this.handleClick 就將之傳給 onClick，當這個函式被呼叫時，this 就會是 undefined。

總之，當使用一個方法，卻沒有在後面加上 () 之時（例如 onClick={this.handleClick}），應該要為這個方法做綁定。

若不喜歡使用 bind，可以使用下面兩種方法：

還在測試中的 class fields 語法

在 callback 中使用 arrow function

這個語法的問題是每一次 LoggingButton render 的時候，就會建立一個不同的 callback。

這個在多數情況不會有問題，但如果這個 callback 會被當成 prop 傳給下層組件，那些組件可能會多做重新渲染的動作，官網建議在建構子的地方做綁定，或使用 class fields 語法，避免影響效能。

將參數傳給 Event Handler

有兩種方法：

一個使用 arrow functions，另一個則使用了Function.prototype.bind。

在這兩個例子，參數 e 代表 React 事件，被當作第二個參數傳遞。

第一個例子需要明確的傳遞它，寫在括號內，而第二個使用 bind 方法的例子，任何進一步的參數都會自動轉發。