初识React-Handler Events

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的值，但是箭头函数是匿名的，如果涉及到移除监听事件，我们可以使用，吧箭头函数赋值给一个变量

初识React-Handler Events

推荐阅读更多精彩内容