React类式组件中方法的this指向问题

最新推荐文章于 2023-05-25 16:27:15 发布

yangwenguangywg

最新推荐文章于 2023-05-25 16:27:15 发布

阅读量984

点赞数

分类专栏： React 文章标签：前端 reactjs

本文链接：https://blog.csdn.net/m0_55905001/article/details/123742750

版权

React 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

React类式组件中方法的this指向问题

背景
场景
解决方法

背景

1.总所周知，在js中，一个类里面的变量是属于实例对象的，但是方法是属于原型对象的。
2.在React中，我们要实现onClick等点击事件的时候，需要调用原型对象上的方法来操作实例对象里面的state，但是他们的this指向是不同的，onClick是以回调函数的形式执行赋给他的方法，那么默认this指向全局window，但是我们需要的是实例对象上的this，来操作state
3.那么我们可以该怎么解决这个问题呢？

场景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件中方法的this指向问题</title>
</head>
<body>
    <div class="box"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
        class Weather extends React.Component{
            constructor(props){
                super(props);
                this.state = {
                    isSummer:false
                }
                // 解决方法：
                //this.toggle = this.toggle.bind(this);
            }
            render(){
                const {isSummer} = this.state;
                return <h1 onClick={this.toggle}>{isSummer ? "夏天" : "冬天"}来了,{isSummer ? "好热" : "好冷"}啊~</h1>
            }

            toggle(){
                console.log(this);
            }
        }
        ReactDOM.render(<Weather/>,document.querySelector(".box"));
    </script>
</body>
</html>

解决方法

这个时候，我们点击事件里面的this指向的是window，但是我们可以通过bind，将toggle方法重新指向实例对象，然后在constructor构造器里面给每一个实例对象创建一个toggle方法，最后将bing生成的新方法赋给他，就ok了
在上面代码的注释里面

参考视频： 尚硅谷
作者： 男神天禹老师

yangwenguangywg

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React类式组件中方法的this指向问题

React类式组件中方法的this指向问题背景场景解决方法背景1.总所周知，在js中，一个类里面的变量是属于实例对象的，但是方法是属于原型对象的。2.在React中，我们要实现onClick等点击事件的时候，需要调用原型对象上的方法来操作实例对象里面的state，但是他们的this指向是不同的，onClick是以回调函数的形式执行赋给他的方法，那么默认this指向全局window，但是我们需要的是实例对象上的this，来操作state3.那么我们可以该怎么解决这个问题呢？场景<!DOC
复制链接

扫一扫