关于react类组件内函数获取不到this

微光

于 2021-11-24 17:18:47 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：工作常见问题 react 文章标签： npm 前端 node.js

本文链接：https://blog.youkuaiyun.com/Web_J/article/details/121520316

工作常见问题同时被 2 个专栏收录

20 篇文章

订阅专栏

react

4 篇文章

订阅专栏

在React开发中，使用class定义组件时，`this`不会默认绑定到实例。通过箭头函数或者在构造函数中使用`bind`方法可以解决这个问题。直接使用箭头函数定义方法可以保持`this`的正确指向，而在构造函数中使用`bind`能确保事件处理函数中的`this`指向组件实例。这种方式对于理解React中`this`的行为至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、定义

2、使用

3、报错

4、原因

当定义React组件时，extends React.Component时，不会将this继承下来。所以this是undefined.
而ES6中的arrow function呢，默认在定义的时候会绑定this。
使用this一般有两种做法。

直接使用箭头函数
在constructor中绑定。

class {

    constructor() {

        super(...arguments);

        this.myFunction = this.myFunction.bind(this);

    }

    

    render() {

        return(

            <div onClick={this.myFunction}></div>

        )

    }

    

    myFunction() {

        //

    }

}