React事件摘錄

JSX 中之內聯（inline）的方式

<button onClick={this.increase}>+</button>

合成事件 SyntheticEvent

React 實現了一個「合成事件」層（synthetic event system），這個事件模型保證了和 W3C 標準保持一致，因此不用擔憂有什麼詭異的用法，而且這個事件層消除了 IE 與 W3C 標準實現之間的兼容問題。
「合成事件」還提供了額外的好處：

事件委託

「合成事件」會以事件委託（event delegation）的方式綁定到組件最上層，而且在組件卸載（unmount）的時候自動銷燬綁定的事件。

什麼是「原生事件」？

好比你在 componentDidMount 方法裏面經過 addEventListener 綁定的事件就是瀏覽器原生事件。
使用原生事件的時候注意在 componentWillUnmount 解除綁定 removeEventListener。
全部經過 JSX 這種方式綁定的事件都是綁定到「合成事件」，除非你有特別的理由，建議老是用 React 的方式處理事件。

若是混用「合成事件」和「原生事件」，好比一種常見的場景是用原生事件在 document 上綁定，而後在組件裏面綁定的合成事件想要經過 e.stopPropagation() 來阻止事件冒泡到 document，這時候是行不通的，參見 Event delegation，由於 e.stopPropagation 是內部「合成事件」 層面的，解決方法是要用 e.nativeEvent.stopImmediatePropagation()
」合成事件「 的 event 對象只在當前 event loop 有效，好比你想在事件裏面調用一個 promise，在 resolve 以後去拿 event 對象會拿不到（而且沒有錯誤拋出）：

handleClick(e) {
  promise.then(() => doSomethingWith(e));
}

參數傳遞

給事件處理函數傳遞額外參數的方式：bind(this, arg1, arg2, ...)

render: function() {
    return <p onClick={this.handleClick.bind(this, 'extra param')}>;
},
handleClick: function(param, event) {
    // handle click
}