美文网首页
关于React的一些奇奇怪怪问题

关于React的一些奇奇怪怪问题

作者: 娜姐聊前端 | 来源:发表于2022-06-08 13:11 被阅读0次

问题一:为什么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的问题。可参考官方解释

Handling Events

我们再看一下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}是不是一样,都是赋值操作呢?所以,最后的结果自然一样了。

相关文章

网友评论

      本文标题:关于React的一些奇奇怪怪问题

      本文链接:https://www.haomeiwen.com/subject/bxjumrtx.html