react的事件绑定跟dom元素的事件绑定很相似，不过有些区别：

• React事件命名是驼峰而不是小写
• 用JSX语法传递的事件处理函数是个function而不是字符串

例如， HTML:

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

用React写则是这样的:

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

另一个区别就是，你不能通过返回false来阻止默认行为，必须明确的用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 spec来定义合成事件，所以你不用担心跨浏览器兼容性。看SyntheticEvent了解更多。

使用React你不需要通过addEventListener为已创建元素添加监听器。相反，只需要在元素初次渲染时提供一个监听器就可以了。

当你用ES6 class定义组件时, 一个常见的模式是将事件处理程序作为类的一个方法。例如, 这个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(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

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

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

Try it on CodePen.

你需要注意下JSX中的this，在JavaScript中, 类方法默认是不会被绑定到类上。默认情况下，如果你忘记绑定this.handleClick，并将它赋给onClick时，当调用该方法时，this将会是undefined。这不是React的特定行为，是how functions work in JavaScript里的一部分。

通常，如果你不想在函数后加()，比如写成这样onClick={this.handleClick},你应该绑定这个函数.

绑定方法有两种，一种是public class fields syntax, 你可以使用class fields来正确地绑定回调：

class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {
    console.log('this is:', this);
  }

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

在Create React App里这种语法是可以工作的。

如果你不想使用class fields syntax的话,可以用箭头函数:

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

这个语法的问题是，每次使用LoggingButton的时候都会创建一个不同的回调函数。 在大多数情况下，这很好。 但是，如果此回调作为子组件的props传递，则这些组件可能会进行额外的重新渲染。 我们通常建议在构造函数中绑定或使用类字段语法，以避免这种性能问题。

将参数传递给事件处理程序

在循环内部，通常需要将一个额外的参数传递给事件处理程序，如果id是行id，以下都会生效：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

使用箭头函数和Function.prototype.bind效果是一样的。

在这两种情况下，表示React事件的e参数将作为ID之后的第二个参数传递。 使用箭头函数，我们必须明确地传递它，但是bind将会自动传递。

你无法确定一个函数中 this 的指向，因为它的值跟函数的调用方式有关，箭头函数中 this 的值是继承自外围作用域。箭头函数不会在函数体内重新定义 this 的值，这使得在回调中的行为更容易预测，并且避免了 this 在回调中潜存的 bug。