初学react之事件

一、在学习react中，事件绑定是必不可少的，那么react中的事件绑定是怎样子的呢，上代码

// 初学容易犯错的写法
class Title extends Component {
  handleClickOnTitle () {
    console.log('Click on title.')
  }

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

上面代码看起来好像也还可以，没啥毛病，好像也符合我们平常的js写法，但是在react这里就有问题了，为什么呢？因为这种事件绑定是通过函数调用的方式，那么它就无法获取this,不信可以试一下，
那么怎么写才是正确的呢，我就写一个我自己用的写法，当然还有其他写法，只是个人习惯而已。

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

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

复制代码

通过箭头函数的方法来使用就是一个比较常规的写法了，我之前也是出过一期this指向的笔记，为何这里用箭头函数就可以获取到this呢，因为箭头函数本身是没有this的，它指向的this是最靠近它的外层作用域的this，也就是当前实例的this了，那为何第一种就获取不到当前组件实例的this呢，肯定有人问了，因为如果是第一种写法，函数里面又会产生一个作用域，那么你所用的this就是函数的this，你无法使用到组件实例的this,那么就是不符合我们的预期了，你学废了吗。