React 事件

React元素的事件绑定与DOM元素十分相似，其区别有以下几点：

1. React事件使用驼峰法命名，而不是小写命名。
2. 使用JSX可以将函数作为事件来传递，而不是字符串。
   例如，在HTML中：

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

在React中：

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

3. 在HTML中可以通过return false来阻止默认操作，而在React中，需要通过调用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是合成事件。React根据 W3C 规范定义了这些合成事件，因此可以无需担心跨浏览器兼容性。有关详细信息，请参阅SyntheticEvent
参考指南。
使用React时，通常不需要在创建DOM元素后通过调用addEventListener来添加监听，只需在最初呈现元素时提供监听即可。
当使用 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(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

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