根据React中类组件的内部原理可知,React的类组件由React对其进行实例化,所以在React类组件内部的this指向都是当前组件的实例化对象。
但是,在做事件处理的时候,类内部自定义的普通函数的this却又指向了undefined
这是因为React的事件处理相当于一个赋值函数,以onClick={this.handleClick}
为例,其过程是onClick通过this找到了原型链上的handleClick函数,当onClick被触发的时候,直接执行handleClick相当于handleChlick()
。
由于是一个普通function,又因为该方法位于类内部自动开启严格模式,所以当前方法的this就指向了undefined
为了解决这个问题,要使用bind()将该方法绑定给指向类组件实例对象的this
this.handleClick.bind(this)
为什么使用bind():bind的第一个参数会作为原函数运行时的this指向
还有一种解决方法,就是使用箭头函数,由于箭头函数没有自身的this指向,所以它会调用外层的this,也就是类的实例化对象
handleClick = () => {}