在React中使用bind处理事件总结

React中为什么要使用bind？

函数传参

比如在一个组件中，有一个点击事件，当点击时触发一个方法，onClick={ this.fun }，能达到我们的目的，触发了方法，执行了函数里的代码，但是有一个问题，就是如何根据我们的需要得到我们想要的结果呢？这就涉及到传参，在React中不能直接传参，onClick={ this.fun（参数） }，这种写法是不对的，应该这样写，onClick={ this.fun.bind（null , 参数） }，这是bind的基本用法。

绑定指向

在js中，this指向是由函数调用者或者箭头函数来决定的，如果传递一个函数名给一个变量，之后通过函数名()的方式进行调用，在方法内部如果使用this则this的指向会丢失。

在react的类组件的render函数中，render将"on+大写字母"开头的事件属性 转化为"on+小写字母"开头的属性 ,并生成真实DOM，生成真实DOM的同时，把这个函数赋值过去。 当把一个函数作为callback传递给另一个函数的时候，这个函数的this一定是会丢失的， 在一个方法中调用this.setState()等函数，或者在render()方法中被调用，都有内层函数参与，因此需要将该方法的this绑定到class。所以如果是用function的普通方法定义，需要在constructor中bind(this)

在setInterval()中定义的回调函数，是在同步代码执行完后，随着事件触发来异步执行的，此时函数的上下文Context已由定义的该函数的Script文件变为全局变量，如果不通过bind(this)来指定由组件实例作为上下文的话，回调函数中的this会指向全局变量window变量，这就与实际不符了，所以会通过bind()方法绑定this

所以在react中，当我们需要在事件处理程序中访问父组件时，就需要把该函数绑定到组件，

 render() {
    return <button onClick={this.handleClick.bind(this)}>按钮</button>;
  }

render() {
    return <button onClick={() => this.handleClick()}>按钮</button>;
  }