React中自定义事件this指向问题

this是基于函数的执行环境（也就是上下文）绑定的，React组件生命周期函数中this的上下文就是组件实例。

你必须谨慎对待 JSX 回调函数中的 this，类的自定义方法默认是不会绑定 this 的。首先调用 constructor() 函数， this.state 的this上下文就是该实例对象；同理，render() 函数中 this也是该实例。

class Bar extends React.Component {
	constructor (){
		super();
		this.state = {
			value: 'react'
		}
	}
	changeValue (){
		console.log(this)  // undefined
	}
	render (){
		console.log(this) // 该组件实例
		return (
			<div>
				<p>{this.state.value}</p>
				<button onClick={this.changeValue}>click me !</button>
			</div>
		)
	}
}

当我们直接绑定this.changeValue调用时，会发现他的this是undefined；你应该为和这个方法绑定this。

解决方式：

①：使用 bind() 函数改变 this 的上下文

class Bar extends React.Component {
	constructor (){
		super();
		this.state = {
			value:'react'
		}
	}
	changeValue (e){
		console.log(e) // 默认event
		this.setState({
			value:`react ${parseInt(Math.random()*100)}`
		})
	}
	render (){
		return (
			<div>
				<p>{this.state.value}</p>
				<button onClick={this.changeValue.bind(this)}>click me !</button>
			</div>
		)
	}
}

也可以在constructor()中：this.changeValue = this.changeValue.bind(this)

②：es6的箭头函数
利用箭头函数将函数的this绑定到其定义时所在的上下文

<div>
	<p>{this.state.value}</p>
	<button onClick={(event) => this.changeValue(event)}>click me !</button>
</div>

或者

changeValue = (e) => {
	console.log(e) // 默认event
	this.setState({
		value:`react ${parseInt(Math.random()*100)}`
	})
}