react 事件监听

react事件监听

在react.js里监听事件很容易，需要给被监听的事件元素加上属性类似于onclick，onkeydown这样的属性，例如我们现在要给title 加上点击时间的监听

class Title extends Component {
  handleClickOnTitle () {
    console.log('Click on title.')
  }
  render () {
    return (
      <h1 onClick={this.handleClickOnTitle}>学代码的小臻</h1>
    )
  }
}

react中的event对象

和我们的普通浏览器一样，事件监听函数会被自动传入一个event对象，浏览器中的对象是浏览器提供的，但是react中的对象是由react.js提供的，因为event是符合w3c的标准，所以就不用考虑不同浏览器的兼容性问题了

class Title extends Component {
  handleClickOnTitle (e) {
    console.log(e.target.innerHTML)
  }
  render () {
    return (
      <h1 onClick={this.handleClickOnTitle}>学代码的小臻</h1>
    )
  }
}

所以当我点击我们的h1时，就会将h1中的innerHTML进行打印

react中时间的this

在类实例中，this指向这个实例本身，但是在点击事件中将this打印出来会看到时null或者是undefined

react.js调用方法时不是将对象方法的方式来进行调用的而是直接调用函数，所以事件监听函数内并不能够通过this来获取实例

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

class Title extends Component {
  handleClickOnTitle (e) {
    console.log(this)
  }
  render () {
    return (
      <h1 onClick={this.handleClickOnTitle.bind(this)}>学代码的小臻</h1>
    )
  }
}