react Elements事件的處理和dom的有相似之處；
1.命名規則：駝峰命名
2.方法是通過jsx而不是字符串
eg:<button onClick={activateLasers}>按鈕</button>；
eg:

class Toggle extends React.Component {
        constructor(props){
            super(props);
            this.state = {isToggle : true};
            //需要改變this的指向，如果忘記的話，當你觸發事件的時候，this是undefined，導致setState為null
            this.handleClick = this.handleClick.bind(this);
        }

        handleClick (){
            this.setState(prevState => ({
                isToggle:!prevState.isToggle
            }))
        }

        render(){
            //如果引用的是一個沒有（）的方法，那就需要bind這個方法
            return <button onClick={this.handleClick}>{this.state.isToggle ? 'ON' : 'OFF'}</button>
        }
    }

    ReactDOM.render(<Toggle/>,document.getElementById('clock'))

如果不喜歡用bind,那這里還有兩種方式你可以得到this。

class LoggerBtn extends React.Component {
        handleClick = () => {
            console.log('this is:', this);
        }//這個語法默認在Create React App（facebook的腳手架）可用的
        render = () => <button onClick={this.handleClick}>點我看控制臺</button>;
    }

    ReactDOM.render(<LoggerBtn/>,document.getElementById('logBtn'));
//不用上面的那個語法，可以用箭頭函數
class LoggerBtn extends React.Component {
       handleClick (e){
           e.preventDefault();
           console.log('this is:', this);
       }
    render() { return <button onClick={(e) => this.handleClick(e)}>點我看控制臺</button>};
   }
    ReactDOM.render(<LoggerBtn/>,document.getElementById('logBtn'));

//第二個方式

class LoggerBtn extends React.Component {
       handleClick (){
           console.log('this is:', this);
       }
       render() { return <button onClick={this.handleClick.bind(this)}>點我看控制臺</button>};
   }

對比三種方式：
bind()
Function.prototype.bind(thisArg [, arg1 [, arg2, …]]) 是ES5新增的函數擴展方法，bind()返回一個新的函數對象，該函數的this被綁定到thisArg上，并向事件處理器中傳入參數；
構造函數內綁定，只需綁定一次，避免每次渲染的時候重新綁定，函數在別處復用也無需綁定；
箭頭函數
會捕獲上下文this的值，但是箭頭函數是匿名的，如果涉及到移除監聽事件，我們可以使用，吧箭頭函數賦值給一個變量