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

娜姐

发布于 2022-06-12 14:34:04

5100

发布于 2022-06-12 14:34:04

文章被收录于专栏：娜姐聊前端

问题一：为什么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}是不是一样，都是赋值操作呢？所以，最后的结果自然一样了。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-06-09，如有侵权请联系 cloudcommunity@tencent.com 删除

react

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

react

登录后参与评论

0 条评论

热度