问题出现:
我们在给比如按钮绑定点击事件函数的时候,我们在事件函数中使用this的时候会报错,这是由于this.xxx是undefined。
通过阅读了几篇博客之后我明白这并不是React这个框架的原因,这是JS的一个机制问题。
问题分析:
我们之前所知道的是,JS中对象调用方法的时候,方法中的this指向的是调用对象
let obj = {
tmp:'Yes!',
testLog:function(){
console.log(this.tmp);
}
};
obj.testLog();
但是呢,如果我们使用一个指针指向该方法的内存区域,再通过这个指针调用这片内存的函数,就会发现this是windows
let obj = {
tmp:'Yes!',
testLog:function(){
console.log(this.tmp);
}
};
let tmpLog = obj.testLog;
tmpLog();
所以this.xxx就是windows.xxx是没有定义的。
而我们传递的事件函数就是一个函数,而onClick是一个中间变量这样就会导致this的指向丢失。
解决方法:
(1)构造函数绑定this(推荐)
class Button extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}
(2)调用的时候绑定this
class Button extends React.Component {
handleClick(){
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick.bind(this)}>
Click me
</button>
);
}
}
(3)箭头函数:箭头函数中的this只会固定的指向声明时的this指向。