事件监听

在 React.js 里面监听事件是很容易的事情，你只须要给须要监听事件的元素加上属性相似于 onClick、onKeyDown 这样的属性，例如咱们如今要给 Title 加上点击的事件监听：

class Title extends Component {
  handleClickOnTitle () {
    console.log('Click on title.')
  }

  render () {
    return (
      <h1 onClick={this.handleClickOnTitle}>React 小书</h1>
    )
  }
}

只须要给 h1 标签加上 onClick 的事件，onClick 紧跟着是一个表达式插入，这个表达式返回一个 Title 本身的一个实例方法。当用户点击 h1 的时候，React.js 就会调用这个方法，因此你在控制台就能够看到 Click on title. 打印出来。

在 React.js 不须要手动调用浏览器原生的 addEventListener 进行事件监听。React.js 帮咱们封装好了一系列的 on* 的属性，当你须要为某个元素监听某个事件的时候，只须要简单地给它加上 on* 就能够了。并且你不须要考虑不一样浏览器兼容性的问题，React.js 都帮咱们封装好这些细节了。

React.js 封装了不一样类型的事件，这里就不一一列举，有兴趣的同窗能够参考官网文档： SyntheticEvent - React，多尝试不一样的事件。另外要注意的是，这些事件属性名都必需要用驼峰命名法。

没有通过特殊处理的话，这些 on* 的事件监听只能用在普通的 HTML 的标签上，而不能用在组件标签上。也就是说，<Header onClick={…} /> 这样的写法不会有什么效果的。这一点要注意，可是有办法能够作到这样的绑定，之后咱们会说起。如今只要记住一点就能够了：这些 on* 的事件监听只能用在普通的 HTML 的标签上，而不能用在组件标签上。

event 对象

和普通浏览器同样，事件监听函数会被自动传入一个 event 对象，这个对象和普通的浏览器 event 对象所包含的方法和属性都基本一致。不一样的是 React.js 中的 event 对象并非浏览器提供的，而是它本身内部所构建的。React.js 将浏览器原生的 event 对象封装了一下，对外提供统一的 API 和属性，这样你就不用考虑不一样浏览器的兼容性问题。这个 event 对象是符合 W3C 标准（ W3C UI Events ）的，它具备相似于event.stopPropagation、event.preventDefault 这种经常使用的方法。

咱们来尝试一下，此次尝试当用户点击 h1 的时候，把 h1 的 innerHTML 打印出来：

class Title extends Component {
  handleClickOnTitle (e) {
    console.log(e.target.innerHTML)
  }

  render () {
    return (
      <h1 onClick={this.handleClickOnTitle}>React 小书</h1>
    )
  }
}

再看看控制台，每次点击的时候就会打印”React 小书“。

关于事件中的 this

通常在某个类的实例方法里面的 this 指的是这个实例自己。可是你在上面的 handleClickOnTitle 中把 this 打印出来，你会看到 this 是 null 或者 undefined。

...
  handleClickOnTitle (e) {
    console.log(this) // => null or undefined
  }
...

这是由于 React.js 调用你所传给它的方法的时候，并非经过对象方法的方式调用（this.handleClickOnTitle），而是直接经过函数调用 （handleClickOnTitle），因此事件监听函数内并不能经过 this 获取到实例。

若是你想在事件函数当中使用当前的实例，你须要手动地将实例方法 bind 到当前实例上再传入给 React.js。

class Title extends Component {
  handleClickOnTitle (e) {
    console.log(this)
  }

  render () {
    return (
      <h1 onClick={this.handleClickOnTitle.bind(this)}>React 小书</h1>
    )
  }
}

bind 会把实例方法绑定到当前实例上，而后咱们再把绑定后的函数传给 React.js 的 onClick 事件监听。这时候你再看看，点击 h1 的时候，就会把当前的实例打印出来：

你也能够在 bind 的时候给事件监听函数传入一些参数：

class Title extends Component {
  handleClickOnTitle (word, e) {
    console.log(this, word)
  }

  render () {
    return (
      <h1 onClick={this.handleClickOnTitle.bind(this, 'Hello')}>React 小书</h1>
    )
  }
}

这种 bind 模式在 React.js 的事件监听当中很是常见，bind 不只能够帮咱们把事件监听方法中的 this 绑定到当前组件实例上；还能够帮助咱们在在渲染列表元素的时候，把列表元素传入事件监听函数当中——这个将在之后的章节说起。

若是有些同窗对 JavaScript 的 this 模式或者 bind 函数的使用方式不是特别了解到话，可能会对这部份内容会有些迷惑，能够补充对 JavaScript 的 this 和 bind相关的知识再来回顾这部份内容。

总结

为 React 的组件添加事件监听是很简单的事情，你只须要使用 React.js 提供了一系列的 on* 方法便可。

React.js 会给每一个事件监听传入一个 event 对象，这个对象提供的功能和浏览器提供的功能一致，并且它是兼容全部浏览器的。

React.js 的事件监听方法须要手动 bind 到当前实例，这种模式在 React.js 中很是经常使用。

下一节：组件的 state 和 setState

上一节：组件的组合、嵌套和组件树