react学习记录-事件监听

事件监听

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

要注意的是，这些事件属性名都必须要用驼峰命名法。

React中的event 对象

事件监听函数会被自动传入一个event对象，不同的是React.js中的event对象并不是浏览器提供的，而是它内部构建的。React.js将浏览器原生的event对象封装了一下，对外提供统一的API和属性，好处是不用考虑浏览器的兼容性。

下面是一个打印的例子：

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

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

关于事件中的this

一般在某个类的实例方法里面的 this 指的是这个实例本身。但是你在上面的 handleClickOnTitle 中把 this 打印出来，你会看到 this 是 null 或者 undefined。

handleClickOnTitle (e) {
    console.log(this)
}

这是因为，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 的时候，就会把当前的实例打印出来：

课后习题

不能摸的狗（一）

class Dog extends Component {
  bark () {
    console.log('bark')
  }
  
  run () {
    console.log('run')
  }
  
  handleClick(){
    this.bark();
    this.run();
  }
  
  render () {
    return (<div onClick={this.handleClick.bind(this)}>DOG</div>)
    // 习惯手动bind到实例的用法
  }
}