React起手-事件处理

React的事件处理和DOM的事件处理是很相似的，只是有一些语法上的区别：

• React的事件名是驼峰的，不是小写的
• 在JSX语法中，你传递一个fucntion作为时间处理器，而不是一个string

举个例子：

<button onClick={activateLasers}>
  Activate Lasers
</button>

而且如果你想拿到事件对象event，这个对象是React按照w3c标准完成的，所以不用担心浏览器的兼容性，可以像如下这样：

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

如果用ES6的class写法可以像如下一样：

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

    // 这个`this`绑定是有必要的，用来让this可以在回调中被正确指向React组件的实例对象
    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(this)，但是都不推荐这么用啊~所以就不再赘述~