React 元素的事件處理和 DOM 元素類似。但是有一點語法上的不同:React 事件綁定屬性的命名采用駝峰式寫法，而不是小寫。如果采用 JSX 的語法需要傳入一個函數(shù)作為事件處理函數(shù)，而不是一個字符串(DOM 元素的寫法)
HTML 通常寫法是：
<button onclick="activateLasers()">? 激活按鈕</button>
React 中寫法為：
<button onClick={activateLasers}>? 激活按鈕</button>
在 React 中另一個不同是你不能使用返回?false?的方式阻止默認行為， 你必須明確的使用?preventDefault。
例如，通常在 HTML 中阻止鏈接默認打開一個新頁面，可以這樣寫：
<a href="#" onclick="console.log('點擊鏈接'); return false">? 點我</a>
在 React 的寫法為：
function ActionLink() {? function handleClick(e) {? ? e.preventDefault();
? ? console.log('鏈接被點擊');
? }
? return (? ? <a href="#" onClick={handleClick}>
? ? ? 點我
? ? </a>
? );}
實例中 e 是一個合成事件。
使用 React 的時候通常不需要使用 addEventListener 為一個已創(chuàng)建的 DOM 元素添加監(jiān)聽器。僅僅需要在這個元素初始渲染的時候提供一個監(jiān)聽器。
當使用 ES6 class 語法來定義一個組件的時候，事件處理器會成為類的一個方法。例如，下面的 Toggle 組件渲染一個讓用戶切換開關(guān)狀態(tài)的按鈕：
class Toggle extends React.Component {
? constructor(props) {
? ? super(props);
? ? this.state = {isToggleOn: true};
? ? // 這邊綁定是必要的，這樣 `this` 才能在回調(diào)函數(shù)中使用
? ? this.handleClick = this.handleClick.bind(this);
? }
? handleClick() {
? ? this.setState(prevState => ({
? ? ? isToggleOn: !prevState.isToggleOn
? ? }));
? }
? render() {
? ? return (
? ? ? <button onClick={this.handleClick}>
? ? ? ? {this.state.isToggleOn ? 'ON' : 'OFF'}
? ? ? </button>
? ? );
? }
}
ReactDOM.render(
? <Toggle />,
? document.getElementById('example')
);
