关于React事件处理函数中this的指向问题

React 专栏收录该内容
1 篇文章 0 订阅

问题出现:

我们在给比如按钮绑定点击事件函数的时候,我们在事件函数中使用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指向。

 

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值