React中的事件绑定——为什么无法获取this的值

React事件绑定的方法

说到React中的事件绑定，你是不是见过这种：

<button onClick={this.handleButton} />

是不是也见到过这种：

<button onClick={this.handleButton.bind(this)} />

What…这些有什么不一样？

其实这两种绑定方式都可以，但是要看你的方法是怎么定义的，要用到什么参数,如果搞不清这两种事件绑定方法的区别的话，就会——获取不到this的值。

解决方法：

一、如果的你的方法是这样定义的：

handleButton(){
	this.setState({
		//key:value
	})
}

那你需要用this.handleButton.bind(this)这种绑定方法才能够在这个方法内获取到this的值

---

二、如果你的方法是这样定义的：

handleButton=()=>{
	this.setState({
		//key:value
	})
}

那么两种绑定方式都可以获取到this的值

---

为什么？

这其实是函数作用域的问题。

handleButton(){
	this.setState({
		//key:value
	})
}

像这种形式的定义，在这个函数内部会产生一个新的作用域，所以你在这里面调用this的话，this指向的这个handleButton函数，而不是你的组件。所以如果你在这里面调用组件的方法，就会报错。

如果你要这么定义你的方法，那么在事件绑定的时候就要在后面加上.bind(this)，才能让你的函数获取到组件的属性和方法。

而使用箭头函数，则不会产生新的作用域。箭头函数里面的this，就是指向组件本身。