React的事件处理函数

React 的事件名称都是使用驼峰标识(比如camelCase)

通过 JSX 可以传递一个函数作为事件处理

HTML:

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

React:

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

当你使用ES6 class定义组件时：

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')
);

在JavaScript中，类方法没有默认绑定this。如果你忘记绑定this.handleClick就将它传递给onClick, 当函数被调用时this将会被赋值undefined

有时候你会觉得使用bind很麻烦，有两个方法可以简化。
1. 使用实验性的语法public class fields syntax

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的方式中是被默认的
2. 如果你并没有使用class的语法，可以在回掉中使用箭头函数

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>
    );
  }
}