Handling Events - 事件處理
React元素的事件處理同DOM元素的事件處理非常相似。
有一些語法不同：
1.React事件使用 'camelCase-駝峰式' 命名，而不是 'lowercase-小寫字母'
2.使用JSX，傳遞一個函式作為事件處理，而不是字串
例如：
HTML程式碼：

			<button onclick="activateLaser()">
				Activate Lasers
			</button>

略微不同於React：

			<button onClick="{activateLaser}">
				Activate Lasers
			</button>
 

另一個不同是，在React中，不能返回 'false' 來阻止預設行為。必須呼叫 'preventDefault'。例如，阻止連結開啟新頁面的預設行為：
HTML程式碼：

			<a href="#" onclick="console.log('The link was clicked.'); return false">
				Click me
			</a>

React程式碼：

			function ActionLink() {
				function handleClick(e) {
					e.preventDefault();
					console.log('The link was clicked');
				}	
				return  (
					<a href="#" onClick={handleClick}>
						Click me
					</a>
				);
			}
 

這裡，'e' 是一個合成事件(synthetic event)。React根據 W3C規範 定義這些合成事件，因此不需要擔心跨瀏覽器的相容問題。可檢視 'SyntheticEvent' 章節學習更多
當使用React，通常不需要呼叫 'addEventListener'，給已經建立的DOM元素新增事件監聽。僅當最初渲染元素時，提供一個監聽器來代替。
當使用ES6類，定義了一個元件，一個常見的模式是：一個事件處理可定義為該類的一個方法。例如：Toggle元件來渲染一個按鈕，允許使用者切換 'ON' 和 'OFF' 狀態：

		class Toggle extends React.Component {
			constructor(props) {
				super(props);
				this.state = {isToggleOn: true};

				// This binding is necessary to make `this` work in the callback
				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('root')
		);
 

你不得不小心JSX回撥函式中的 'this' 的意思。在JS中，類方法預設沒有被繫結。如果你忘記繫結 'this.handleClick'，並且傳遞給 'onClick'，當函式被真實呼叫時，'this' 將會是 'undefined'。
這不是React特有的行為；它是 'JS中函式如何工作' 的一部分(是js的語法)。通常，如果你涉及一個方法，沒有 '()' 跟在方法名後面，例如：onClick={this.handleClick}，你應該繫結這個方法。
如果呼叫 'bind' 使你苦惱，有2種方法可以繞過這個。如果你正在使用實驗性的 'property initializer syntax-屬性初始化語法'，你可以使用屬性初始化來正確的繫結回撥：

		class LoggingButton extengs React.Component {
		 	// This syntax ensures `this` is bound within handleClick.
			// Warning: this is *experimental* syntax.
			handleClick = () => {
			    console.log('this is:', this);
			}	
			render() {
				return (
					<button onClick={this.handleClick}>
						Click me
					</button>
				);
			}
		}

使用 'Create React App' 方式建立專案(安裝方式的一種)，這個解析是預設啟用的。
如果你沒有使用屬性初始化語法，你可以在回撥函式中，使用一個 '箭頭函式'(arrow function)，例如：

		class LoggingButton extengs React.Component {
			handleClick = () => {
			    console.log('this is:', this);
			}	
			render() {
				// This syntax ensures `this` is bound within handleClick
				return (
					<button onClick={(e) => this.handleClick(e)}>
						Click me
					</button>
				);
			}
		}

這種語法的問題是：每次 'LoggingButton' 渲染，都會建立一個不同的回撥函式。在大多數情況下，是沒問題的。然而，如果這個回撥函式作為一個prop傳遞給低階元件(內部元件)，這些元件，可能執行一次額外的重新渲染。我們一般推薦在構造器中繫結，避免這型別的效能問題。