react 事件处理

react 的事件处理和DOM的事件处理其实是比较像的，但是因为jsx更加偏向js，所以我们定义事件处理函数的时候应该使用驼峰命名法。

• 比如DOM中是onclick
• react里面是onClick

react不能够在处理函数中使用return false来阻止默认行为，必须在事件对象e上明确使用e.preventDefault()，而且这个事件对象e是模拟的DOM中的e对象，称为合成事件.

事件的处理函数我们可以直接定义在组件的class中，不过我们需要注意处理函数的this指向问题，看个例子:

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

注意构造函数中的this.handleClick 绑定了this，如果我们没有这句话的话，handleClick函数中的this其实是undefined,所以我们在使用一些非官方的方法的时候(官方的方法是绑定了this的，比如componentDidMount)一定要记得绑定this，当然这样可能太麻烦了，我们怎么可能这么用，所以我们一般都使用实验性质的属性初始化器(这个是利用babel)，可能不太懂是什么意思，我们看一个例子

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

其实就是把本来需要在构造其中定义的属性放在class里面定义了，state我们也可以这么写。
如果我们不这么写，那我们就在onClick的时候外面套一层箭头函数:

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

这个方法有一个问题就是每次渲染这个组件的时候，都会创建一个不同的回调函数。

所以我们使用属性初始化器来避免这类性能问题。

最后，有些情况下，我们会给事件处理函数传递额外的参数（除了合成事件e），那么我们在定义事件处理函数的时候把合成事件e作为最后一个参数。看个例子：

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

我们有两种方式来把事件处理函数和组件绑定，可以看到如果我们要传递额外的参数给处理函数的话，我们没法再写成原来的那个<button onClick={this.handleClick}>因为这样没法传递额外的参数，所以我们必须写成上面这两种的一种。

这两种中bind方法是比较好的方式，因为我们不需要显示传递e，而且没有额外的匿名函数。