React事件处理

React元素的事件处理和DOM元素的区别

React元素的事件处理和DOM元素相似，但语法上有些不同：

• React事件绑定属性的命名采用驼峰式写法，不是小写
• 如果采用JSX的语法需要传入一个函数作为事件处理函数，不是字符串（DOM元素的写法）

//传统的HTML
<button onclick="handleDelete()">Delete</button>
//React中
<button onClick="this.handleDelete">Delete</button>

• 在React中阻止默认行为不能使用return false，必须使用event.preventDefault()
  在react中，event是一个合成事件，不需要担心跨浏览器的兼容性问题。

React元素的事件处理如何使用

使用React的时候通常不需要使用addEventListener为已创建的DOM元素添加监听器，仅仅需要在这个元素初始渲染的时候提供一个监听器。
当使用ES6 class语法定义组件的时候，事件处理器会成为类的一个方法，如下面定义的删除组件

import React, {Component} from 'react'
export default class Delete extends Component {
  handleDelete = () => {}
  render() {
    return (
        <Button onClick={this.handleDelete}>
             Delete
        </Button>
    )
  }
}

注意：必须谨慎对待事件处理函数的this，类的方法默认不会绑定this，如果忘记绑定this.handleBatchDelete并把它传入onClick，当点击按钮时，this的值为undefined，会报错。

如何正确绑定事件处理函数

//方法一：在constructor中使用bind方法绑定
import React, {Component} from 'react'
export default class Delete extends Component {
  constructor(props) {
    super(props);
    // This binding is necessary to make `this` work in the callback
    this.handleDelete = this.handleDelete.bind(this);
  }
  handleDelete() {}
  render() {
    return (
        <Button onClick={this.handleDelete}>
             Delete
        </Button>
    )
  }
}

//方法二： 在回调函数中使用箭头函数
import React, {Component} from 'react'
export default class Delete extends Component {
  constructor(props) {
    super(props);
  }
  handleDelete() {}
  render() {
    return (
        <Button onClick={(e) => this.handleDelete(e)}>
             Delete
        </Button>
    )
  }
}

//方法三：使用属性初始化器语法
import React, {Component} from 'react'
export default class Delete extends Component {
  constructor(props) {
    super(props);
  }
  handleDelete = () => {}
  render() {
    return (
        <Button onClick={this.handleDelete}>
             Delete
        </Button>
    )
  }
}

注意：使用方法二有个问题是每次 Button 渲染的时候都会创建一个不同的回调函数。在大多数情况下，没有问题。如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。

如何向事件处理程序传递参数

通常会为事件处理程序传递额外的参数，如：要删除某一行，需要传入该行id，如下：

//方法一：通过箭头函数方式传递参数，事件对象e必须显示的进行传递
import React, {Component} from 'react'
export default class Delete extends Component {
  constructor(props) {
    super(props);
  }
  handleDelete = (id, e) => {}
  render() {
    return (
       <Button onClick={(e) => {this.handleDelete(id, e)}}>
          Delete
       </Button>
    )
  }
}
//方法二：通过bind方式传参，事件对象e隐式的传递，并且e要排在所传递参数的后面
import React, {Component} from 'react'
export default class Delete extends Component {
  constructor(props) {
    super(props);
  }
  handleDelete = (id, e) => {}
  render() {
    return (
       <Button onClick={this.handleDelete.bind(this, id)}>
          Delete
        </Button>
    )
  }
}

参考文档：
http://react.yubolun.com/docs/handling-events.html