问题一:为什么React事件处理函数会丢失this
?
写Class类型React组件时,大家都会记得要将事件函数绑定this
,如下:
class Button extends React.Component {
constructor(props) {
super(props);
// this绑定
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>Click me </button>
);
}
明明我们指定了this.handleClick
,调用者是this
,怎么就丢了呢?
这是因为,在React(或者说JSX)中,传递的事件参数不是一个字符串,而是一个实实在在的函数。
也就是说,在做onClick={this.handleClick}
赋值操作后,React真正调用的是onClick()
,而onClick
是dom事件,并不是类中的方法,此时的this
其实指向的是全局作用域,而这个作用域下并没有setState
方法,所以自然报undefined
错误。
所以,这是一个JS本身的问题,而不是React的问题。可参考官方解释。
我们再看一下JS中this
本身的陷阱,对比上面的例子,就更好理解了。
let obj = {
tmp:'Yes!',
testLog:function(){
console.log(this.tmp);
}
};
obj.testLog();
打印值:Yes!
,符合期望。修改一个版本再看看。
let obj = {
tmp:'Yes!',
testLog:function(){
console.log(this.tmp);
}
};
let test = obj.testLog;
test();
打印值:undefined
,好吧,this
这时指向window
了。
看一看,let test = obj.testLog;
和onClick={this.handleClick}
是不是一样,都是赋值操作呢?所以,最后的结果自然一样了。
网友评论