React中this指向常用的2种修正方式

发布时间：2020-12-15 20:23:28 所属栏目：百科来源：网络整理

导读：一、使用bind方法(构造函数内绑定) !DOCTYPE htmlhtml head meta charset="utf-8" title三大属性之state使用/title /head body div id="test1"/div /body script src="./js/babel.min.js" charset="utf-8"/script script src="./js/react.development.js" ch

一、使用bind方法(构造函数内绑定)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>三大属性之state使用</title>
  </head>
  <body>
    <div id="test1"></div>
  </body>
  <script src="./js/babel.min.js" charset="utf-8"></script>
  <script src="./js/react.development.js" charset="utf-8"></script>
  <script src="./js/react-dom.development.js" charset="utf-8"></script>
  <script type="text/babel">
    // 1.创建虚拟DOM
    class Like extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          isLike: false
        };
        // 自定义函数中的this默认指向undefined，所以需要修改this的指向
        this.handleClick = this.handleClick.bind(this);
      }
      render(){
        const {isLike} = this.state;
        return <h2 onClick={this.handleClick}>{isLike ? ‘他喜欢我‘ : ‘他不喜欢我‘}</h2>;
      }
      handleClick(){
        // 获取状态
        // console.log(this); // undefined
        const isLike = !this.state.isLike;
        // 修改状态
        this.setState({
          isLike
        })
      }
    }
    // 2.渲染
    ReactDOM.render(<Like/>,document.getElementById("test1"));
  </script>
</html>

也可以onClick={this.handleClick.bind(this)};这种方法简洁明了，但由于 function函数在每个render上重新分配，所以有性能影响。

二、使用箭头函数

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>三大属性之state使用</title>
  </head>
  <body>
    <div id="test1"></div>
  </body>
  <script src="./js/babel.min.js" charset="utf-8"></script>
  <script src="./js/react.development.js" charset="utf-8"></script>
  <script src="./js/react-dom.development.js" charset="utf-8"></script>
  <script type="text/babel">
    // 1.创建虚拟DOM
    class Like extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          isLike: false
        };
        // 自定义函数中的this默认指向undefined，所以需要修改this的指向
        // 1.bind 2.箭头函数 3.
        // this.handleClick = this.handleClick.bind(this);
      }
      render(){
        const {isLike} = this.state;
        return <h2 onClick={this.handleClick}>{isLike ? ‘他喜欢我‘ : ‘他不喜欢我‘}</h2>;
      }
      // 箭头函数修正this指向
      handleClick = () => {
        // 获取状态
        // console.log(this); // undefined
        const isLike = !this.state.isLike;
        // 修改状态
        this.setState({
          isLike
        })
      }
    }
    // 2.渲染
    ReactDOM.render(<Like/>,document.getElementById("test1"));
  </script>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!