解决React类组件中一般方法中的this指向问题

最新推荐文章于 2023-03-09 11:02:22 发布

weixin_Da冰

最新推荐文章于 2023-03-09 11:02:22 发布

阅读量352

点赞数 1

文章标签： reactjs

本文链接：https://blog.csdn.net/weixin_45976622/article/details/117966747

版权

解决React类组件中一般方法中的this指向问题

解决方法

this.方法名 = this.方法名.bind(this)

上面等式的解释：我们先看右边中的this：这个this是在构造器方法中的，所以它的指向是组件的实例对象；方法名：这个方法是在类的原型对象上的；而使用bind的函数把这个原型对象方法上的this修改成类实例对象上的this，右边的代码执行完成之后生成一个新的函数，然后把这个新函数放到实例的自身上也就是等式的左边，且给这个函数起了一个名字（左边方法名），这样就能解决原型方法上其他方法调用该方法this指向是undefined的问题了。此时其他方法调用该函数时this就指向的是实例对象了

具体事例

<!DOCTYPE html>

<html lang="en">

<head>


    <meta charset="UTF-8">


  <title>state</title>

</head>

<body>

  <!-- 准备好一个“容器” -->

    <div id="test"></div>

  

  <!-- 引入react核心库 -->

    <script type="text/javascript" src="../js/react.development.js"></script>

  <!-- 引入react-dom，用于支持react操作DOM -->

    <script type="text/javascript" src="../js/react-dom.development.js"></script>

  <!-- 引入babel，用于将jsx转为js -->

    <script type="text/javascript" src="../js/babel.min.js"></script>



    <script type="text/babel">


    //1.创建组件

    class Weather extends React.Component{

      constructor(props) {

        super(props)

        this.state = {isHot: false}

        // 解决changeWeather中的this指向问题

        this.changeWeather = this.changeWeather.bind(this)

      }

      render() {

        const {isHot} = this.state

      //此时onClick事件调用的方法是类的自身的函数

        return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}</h1>

      }

      changeWeather() {

        // changeWeather是放在哪里的？ -Weather的原型对象上，供实例使用

        // 由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用

        // 类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined

        console.log(this);

      }

    }

    //2.渲染组件到页面

    ReactDOM.render(<Weather/>,document.getElementById('test'))

  </script>

</body>

</html>