事件处理

React 元素的事件处理和 DOM 元素的事件处理非常相似。但也有一些语法差异：

React 事件使用驼峰命名，而不是小写字母。
使用 JSX 你传递一个函数作为事件处理器，而不是一个字符串。

例如，下面这段 HTML：

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

在 React 中略微不同：

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

另一个不同是：在 React 中，你不能返回一个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标准定义了这些合成事件，所以你不需要担心跨浏览器兼容性。查看合成事件参考指南学习更多知识。

当使用 React 时，你通常不需要在一个 DOM 元素被创建后，调用addEventListener来添加监听器到 DOM 元素。相反，仅仅当元素被初始化渲染时提供一个监听器。

当你使用 ES6 class 定义一个组件时，一个通用的模式是一个事件处理器，就是类的一个方法。例如，Toggle组件渲染一个按钮使用户可以在“开”和“关”两种状态之间切换：

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

    // 这个绑定是必须的，使this在这个回调中好好工作
    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')
);

在CodePen上试试。

在 JSX 回调函数中，你必须小心this的含义。在 JavaScript 中，类的方法默认是不绑定的。如果你忘记绑定this.handleClick并且把它传递个onClick，当函数被真实的调用时，this将会是undefined。

这不是 React 特定的行为，这是函数在 JavaScript 中如何工作中的一部分。通常，如果你引用一个方法，不在它后面加()，比如onClick={this.handleClick}，你应该绑定这个方法。

如果调用bind让你不爽，有两种方法你可以避开它。如果你使用实验性质的属性初始化语法，你可以使用属性初始化来正确的绑定回调函数：

class LoggingButton extends React.Component {
  // 确保 this 在 handleClick 中是绑定的
  // 警告：这是实验性的语法
  handleClick = () => {
    console.log('this is:', this);
  }

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

这种语法在 Create React App 中是默认开启的。

如果你不使用属性初始化语法，你可以在回调函数中使用一个箭头函数：

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渲染，就会创建不同的回调函数。在大多数情况下，这没问题。然而，如果这个回调函数作为 prop 传递给下级组件，这些组件可能会做一些额外的重新渲染。我们通常建议在构造函数中绑定类避免这样的性能问题。

下一步

条件渲染

react文档——事件处理

react文档——事件处理

事件处理

推荐阅读更多精彩内容