React对事件的处理

与原生的事件处理有点差异，具体表现在：

1. react使用驼峰事件命名,而不是小写
2. 对于句柄来说传递的是一个jsx函数

//原生的写法
<button onclick="activateLasers()">
  Activate Lasers
</button>
//react写法
<button onClick={activateLasers}>
  Activate Lasers
</button>

3. 阻止浏览器默认行为，原生事件处理，可以通过返回false来阻止阻止浏览器默认行为，也可以通过调用事件对象的preventDefault方法来实现。而react只能通过调用preventDefault来实现。

//原生的处理方式
<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>
    );
}

实例： 在页面实现按钮开关
在Toggle组件中，返回了button，根据状态显示on/off文案，并且监听点击事件，回调函数为handleClick，在回调中设置组件的状态，state改变后，则又调用render方法，更新UI。

class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.state = { isToggleOn: true };
        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')
);

此处bind函数很有意思：先来看，bind的函数作用：改变函数执行的上下文，也就是this的指向。
bind函数会创建一个新的函数，称为绑定函数，并且调用的时候上下文指向创建时传入的第一个参数。
在本例中，点击出发onClick事件后，执行this.handleClick，此时的this指向是当前Toggle对象。

如果不使用bind函数，还可以使用属性初始化语法，也可以直接在钩子函数处使用箭头函数

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

render() {
        return (
            <button onClick={(e) => this.handleClick(e)}>
                Click me
      </button>
        );
    }