React元素的事件处理与DOM元素类似，但语法上有一些区别。

---

React 事件

React元素与DOM元素的事件处理的语法区别：

• React事件的命名应采用小驼峰式（camelCase），而不要使用纯小写
• 使用JSX语法时需要传入一个函数作为事件处理函数，而不是一个JS语句

传统的HTML：

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

在React中则如下所示：

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

阻止事件生效

在HTML中通过返回false即可阻止事件生效：

<a href="https://zhuanfou.com" onclick="console.log('该链接被点击了'); return false">
  来点我呀
</a>

在React中则如下所示：

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('该链接被点击了');
  }

  return (
    <a href="https://zhuanfou.com" onClick={handleClick}>
      来点我呀
    </a>
  );
}

回调函数要绑定this

如下所示的类组件的构造器中要将this绑定到该回调函数中：

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

    // 绑定才可以在回调函数handleClick中调用this变量
    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')
);

运行一下

如果不想在构造器中bind，可用如下简化写法，直接将事件绑定对象传到函数中去，与上述代码是等效的。

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

运行一下

向事件处理函数传参

在React中，以下两种方式都可以向事件处理的回调函数传递参数：

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