事件监听

事件监听

---

在React.js里面监听是一件很容易的事情，只需要在需要监听事件的元素加上类似onClick的属性，例如：

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

  render () {
    return (
      <h1 onClick={this.handleClickOnTitle}>事件监听</h1>
    )
  }
}

给h1标签加上了onClick属性，onClick紧更着一个表达式，这个表达式返回一个Header这个组件的一个实例方法。当用户点击h1标签的时候，控制台上就会输出Click on title，类似AngularJs里面的ngClick。

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

但是，事件监听只能加在普通的HTML标签上，而不能加在自定义的Component上，例如<Header onClick={...}>，这样是没有效果的。但是有办法可以做到这样的绑定，目前我还不知道。。。

event对象

---

事件监听函数会被传入一个event对象，这个对象和浏览器中监听事件传递的对象基本是一致的，不过React.js将原声的event对象封装了一下，对外提供统一的API和属性，我们同样不用去关心浏览器兼容问题。尝试以下代码查看效果：

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

  render () {
    return (
      <h1 onClick={this.handleClickOnTitle}>事件监听</h1>
    )
  }
}

点击后，控制台会输出‘事件监听’。

事件中的this

---

一般this表示对象本身，如果你尝试在上述代码中的方法handleClickOnTitle里将this打印出来，会发现控制台输出的是undefine。

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

  render () {
    return (
      <h1 onClick={this.handleClickOnTitle}>事件监听</h1>
    )
  }
}

这是因为React.js在调用方法时，不是通过对象方法的方式调用的（this.handleClickOnTitle），而是直接通过调用函数（handleClickOnTitle）来执行的。所以事件监听函数内并不能通过this来获取实例。

如果想在事件函数中使用当前的实例，就需要手动将实例方法bind到当前实例上，再传入给React.js。

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

  render () {
    return (
      <h1 onClick={this.handleClickOnTitle.bind(this)}>事件监听</h1>
    )
  }
}

这样实例方法就绑定了当前实例this，便可以在实例方法中使用当前实例的数据或方法。

也可以在bind的时候给事件监听传入参数：

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

  render () {
    return (
      <h1 onClick={this.handleClickOnTitle.bind(this, 'Hello')}>事件监听</h1>
    )
  }
}

总结

---

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

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

• React.js 的事件监听方法需要手动 bind 到当前实例，这种模式在 React.js 中非常常用。