React —— 绑定事件回调

事件处理

React元素的事件处理和DOM元素的很相似，但是有一点语法的不同：

• React事件的命名采用小驼峰式(camelCase)，而不是纯小谢。
• 使用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时，你一般不需要使用addEventListener为已创建的DOM元素添加监听器。事实上，你只需要在该元素初始化渲染的时候添加监听器即可。
当你使用ES6 class语法定义一个组件的时候，通过的做法是将时间处理函数声明为class中的方法。例如：

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

    // 为了在回调中使用 `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')
);

你必须谨慎对待jsx回调函数中的this，在javascript中，class的方法默认不会绑定this.如果你忘记绑定this.handleClick并把它传入onclick，当你调用这个函数的时候this的值为undefined。
如果觉得使用bind很麻烦，这里有两种方式可以解决。如果你正在使用实验性的public class fields语法，你可以使用class fields正确的绑定回调函数：

class LoggingButton extends React.Component{
    handleClick = ()=>{
        console.log('this is',this)
    }
    render(){
        return (
            <button onClick={this.handleClick}>LoggingButton</button>
        )
    }
}

如果你没有使用class fields语法，你也在回调中使用箭头函数：

class LoggingButton extends React.Component{
    handleClick  (){
        console.log('this is',this)
    }
    render(){
        return (
            <button onClick={()=>this.handleClick()}>LoggingButton</button>
        )
    }
}

此语法的问题在于每次渲染LoggingButton的时候都会创建不同的回调函数。在大多数情况下，这没有什么问题，但是如果该回调函数作为Prop传入子组件时候，这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定或使用class fields语法来避免这类性能问题。

向事件处理程序传递参数

在循环中，通常我们会事件处理函数传递额外的参数，例如，若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的事件对象会被座位第二个参数传递，如果通过箭头函数的方式事件对象必须显示的进行传递，而通过bind的方式，事件对象一起更多的参数将被隐式的进行传递。