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

最新推荐文章于 2023-09-07 17:06:29 发布

原创最新推荐文章于 2023-09-07 17:06:29 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#npm #前端 #node.js

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

20 篇文章

订阅专栏

react

4 篇文章

订阅专栏

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

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() {

        //

    }

}