React类组件中this的指向

React类组件中this的指向

在react的类组件中，render中的this默认是指向类组件实例对象的，因此点击事件上绑定的this是指向实例对象的

<button type="button" onClick={this.handleClick}>Click Me</button>

onClick中的this是指向类组件实例对象的，所以可以在实例对象的原型上找到handleClick方法，当点击该按钮后，handleClick方法中的this则会变成undefined

// 类似于将对象中的方法赋给了其他变量，然后该变量再调用，就丢失了绑定的上下文
// 以下button 的点击事件则类似以下情况
const fun = obj.handle;
fun();  

使点击事件中调用方法的this指向实例对象的三种方法

• a.因为箭头函数的this跟外层普通函数的this指向是一样的，所以this是指向实例对象的，且是直接指向，故方法内的this指向实例

<button type="button" onClick={() => this.handleClick()}>Click Me</button>

• b.定义的方法写成回调函数的形式，因为箭头函数的this只跟外层普通函数this有关

handleClick = () => {
    console.log(this) // this指向类实例对象
}
<button type="button" onClick={this.handleClick}>Click Me</button

• c.使用bind去改变this指向，因为bind改变指向后，无论怎么调用该方法，都是指向bind传入的对象

<button type="button" onClick={this.handleClick.bind(this)}>Click Me</button

或者在constructor中绑定

constructor(props) {
	super(props)
	this.handleClick = this.handleClick.bind(this)
	}