onClikc={this.handleClick} 这里的this为什么不是指向render()而是指向了class里的handleClick呢？

来源：3-12 【事件驱动】React Event 事件处理

慕UI3370524

2024-03-16

在视频5:30， line 27, 这里render() 函数并没有用箭头函数也没有bind，为什么这里的 this 就能指向handleClick, 而不是指向render()呢？

onClick={this.handleClick}

写回答

1回答

阿莱克斯刘

2024-03-26

同学你好，React 的事件绑定机制稍微有点复杂。首先，我们要明确的是，不是所有react类组件中所有的方法都会出现this指向不明确，这种情况只会出现在事件处理方法中， event handler method，如方法handleClick。也就是说，render方法中的this本来就指向class本身而不是render方法。

其实，我们有两种方法解决handleClick中的this问题，第一种就是课程介绍的使用箭头方法的形式；而第二种方法则出现在ES6之前，比较原始，我们可以在构造方法中使用 .bind(this) 来显式绑定 this，如：

constructor(props: Props) 
{  
    super(props);  
    this.state = {    
        isOpen: false,
    };  
    this.handleClick = this.handleClick.bind(this);
}

第二种方法很啰嗦，不推荐。

React18 系统精讲结合TS打造旅游电商平台

React18 精讲 + 结合 TS 实战 + 热门业务开发，获取必备技能

1993 学习 · 1015 问题

查看课程

相似问题

这里的this指向handleClick本身？那我咋打印this是个undefined

回答 1

关于单向数据流的疑问

回答 1

关于this指向问题

回答 2

这一块逻辑没搞懂，setstate不是一直是undefined吗？

回答 1

请问这个有什么方法不写呢

回答 1

打开慕课网App查看更多内容