事件绑定

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

  1. React事件绑定属性的命名采用驼峰式写法，而不是小写。
  2. 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)
  3. 阻止事件默认行为只能调用e.preventDefault; 而DOM事件还可以使用 return false

例如：
传统dom事件

  1. <button onclick="activateLasers()">
  2.   Activate Lasers
  3. </button>
  4. <a href="#" onclick="console.log('The link was clicked.'); return false">
  5.   Click me
  6. </a>
  7. 复制代码

React事件

  1. <button onClick={activateLasers}>
  2.   Activate Lasers
  3. </button>
  4.  function ActionLink() {  function handleClick(e) {
  5.     e.preventDefault();
  6.     console.log('The link was clicked.');
  7.   }
  8.   return (
  9.     <a href="#" onClick={handleClick}>
  10.       Click me
  11.     </a>
  12.   );
  13. }复制代码

this指向

JSX 中事件绑定的回调函数中，this并不会指向React组件实例。尽管ES6规范中，class类的方法中，this默认指向类的实例，单如果单独使用该方法，this会指向函数调用的上下文。jsx中事件绑定函数，就是单独使用，this并不会指向组建的实例。如何绑定this到组件实例，有如下几种方法：
1. 使用箭头函数，直接在React元素中采用箭头函数定义事件的处理函数，如下：

  1. <button onClick={(e) => {console.log(this.state.number)}}> 点击 </button>复制代码

因为箭头函数中this指向的是函数定义是的对象，故保证this总是指向当前组件的实例对象。
但是如果事件处理逻辑较多，这样直接在元素上写，造成代码可读性差，故一般把逻辑封装成组件的一个方法，然后在箭头函数中调用这个方法。

  1. handleClick(event) {
  2.     this.setState({})
  3. }
  4. render(){
  5.     return <button onClick={(e) => {this.handleClick(event)}}> 点击 </button>}复制代码

缺点： 直接在render方法中为元素事件定义事件处理函数，每次render调用，都会重新创建一个新的事件处理函数。
2. 使用组件的方法，直接将组件方法赋值给元素的事件属性，同时在类的构造函数中，将这个方法的this绑定到当前对象，如：

  1. class Header extends React.componet {
  2.     constructor (props) {
  3.         super (props)
  4.         this.handleClick = this.handleClick.bind(this)
  5.     }
  6.     handleClick() { }
  7.     render() {
  8.         return <button onClick={this.handleClick}> 点击 </button>
  9.      }   
  10. 复制代码
  1. 还是使用组件的方法，不过是在给元素的时间属性赋值的时候，同时为时间处理函数绑定this，如果需要向处理函数传递额外的参数，这种方式很方便
    1. handleClick(number, event) { 
    2. }
    3. render() {
    4. return <button onClick={this.handleClick.bind(this,3)}> 点击 </button>
    5. }   
    6. 复制代码

  2. ES7的属性初始化语法,自动为class中定义的方法绑定this，如：

    1. handleClick = (event) => { 
    2. }
    3. render() {
    4. return <button onClick={this.handleClick}> 点击 </button>
    5. }  复制代码

    参考阮一峰es6书中，19.14.1小节，应该也算是Class的实例属性新的写法

    1. class Myclass {
    2.  myprop = 42;
    3.  consturctor() {
    4.      this.name = "killer"
    5.  }
    6. }复制代码

    myprop 和 name 都是实例的属性，只是写法不一样
    5. ES新提案语法—双冒号语法，不能带参数

    1. bind5(){
    2.  console.log('bind5', this)
    3. }
    4. render() {
    5. return (
    6.  <div>
    7.     <button onClick={::this.bind5}></button>
    8.  </div>
    9. )
    10. }复制代码

    传参

    通常我们会为事件处理程序传递额外的参数。例如，若是 id 是你要删除那一行的 id，以下两种方式都可以向事件处理程序传递参数：

    1. <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
    2. <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>复制代码

    参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。
    值得注意的是，通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面，例如:

    1. class Popper extends React.Component{
    2.  constructor(){
    3.      super();
    4.      this.state = {name:'Hello world!'};
    5.  }
    7.  preventPop(name, e){    //事件对象e要放在最后
    8.      e.preventDefault();
    9.      alert(name);
    10.  }
    12.  render(){
    13.      return (
    14.          <div>
    15.              <p>hello</p>
    16.              {/* Pass params via bind() method. */}
    17.              <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
    18.          </div>
    19.      );
    20.  }
    21. }复制代码

    参考 ： https://react.docschina.org/docs/handling-events.html