React中绑定this并传参的三种方式

前言

  React中，在使用函数的过程中可能会改变this的指向，导致不能正常获取到值的问题，所以React中有三种方式可以供我们使用，从而解决this的指向问题。

绑定this并传参的方式

方式一：在事件处理函数中，直接使用bind绑定this并传参

  bind的作用：为前面的函数，修改函数内部的this指向，让函数内部的this，指向bind参数列表中的第一个参数。bind中的第一个参数，是用来修改this指向的，第一个参数后面的所有参数，都会当做将来调用前面函数时候的参数传递进去。

<input type="button" value="绑定this并传参的方式" onClick={this.changeMsg.bind(this,'●','▅')} />

  函数调用：

changeMsg(arg1,arg2) {
    this.setState({
        msg: '绑定this并传参的方式' + arg1 + arg2
    })
}

方式二：在构造函数中绑定并传参

<input type="button" value="绑定this并传参的方式" onClick={this.changeMsg} />

  constructor中使用bind改变函数指向：

this.changeMsg = this.changeMsg.bind(this,'☺','☼')

  注意：当为一个函数，调用bind改变了this指向后，bind函数调用的结果，有一个返回值，这个值，就是被改变this指向后的函数的引用，bind不会修改原函数的this指向，所以需要重新赋值。

  函数调用：

changeMsg(arg1,arg2) {
    this.setState({
        msg: '绑定this并传参的方式2' + arg1 + arg2
    })
}

方式三：箭头函数并且传递参数

<input type="button" value="绑定this并传参的方式" onClick={() => {this.changeMsg('◆','★')}} />

  函数调用：

changeMsg(arg1,arg2) {
    this.setState({
        msg: '绑定this并传参的方式2' + arg1 + arg2
    })
}