一、使用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>

三、在15版本中，可以使用React.createClass({})创建组件，这样会自动绑定上下文的this

React中this指向常用的2种修正方式的更多相关文章

  1. 【温故知新】——原生js中常用的四种循环方式

    一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0   网页输出“欢迎下次光临” 在网页中弹出框输入1   网页输出“查询中……” 在 ...

  2. Jmeter中的参数化常用的几种方式

    Jmeter中的参数化常用的几种方式,这里讲一下前两个方式,最后一个在csv参数化里已详细讲解. 1.用户参数 2.函数助手 3.CSV Data Set Config  一.用户参数 位置:添加-前 ...

  3. 【译】在React中实现条件渲染的7种方法

    原文地址:https://scotch.io/tutorials/7-ways-to-implement-conditional-rendering-in-react-applications 借助R ...

  4. Vue中常用的几种传值方式

    Vue中常用的几种传值方式 1. 父传子 父传子的实现方式就是通过props属性,子组件通过props属性接收从父组件传过来的值,而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为da ...

  5. Ajax中的get和post两种请求方式的异同

    Ajax中我们经常用到get和post请求.那么什么时候用get请求,什么时候用post方式请求呢? 在做回答前我们首先要了解get和post的区别.   1. get是把参数数据队列加到提交表单的A ...

  6. Android平台中实现对XML的三种解析方式

    本文介绍在Android平台中实现对XML的三种解析方式. XML在各种开发中都广泛应用,Android也不例外.作为承载数据的一个重要角色,如何读写XML成为Android开发中一项重要的技能. 在 ...

  7. Hibernate中双向多对多的两种配置方式

    Hibernate中双向多对多的两种配置方式 1.建立多对多双向关联关系 package cn.happy.entitys; import java.util.HashSet; import java ...

  8. [转] React 中组件间通信的几种方式

    在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面依次说下这几种通 ...

  9. React 中的 定义组件的 两种方式

    React 中创建 Components 的方式有两种:Function and Class 定义一个组件最简单的方法就是写一个 JavaScript 函数 function Welcome(prop ...

随机推荐

  1. java中volatile关键字的含义（转载）

    在java线程并发处理中,有一个关键字volatile的使用目前存在很大的混淆,以为使用这个关键字,在进行多线程并发处理的时候就可以万事大吉. Java语言是支持多线程的,为了解决线程并发的问题,在语 ...

  2. [Svelte 3] Use DOM events and event modifiers in Svelte 3

    The whole magic of webapps is that users can interact with our code via various DOM events and Svelt ...

  3. 题解 [BZOJ2159] Crash的文明世界

    题面 解析 这题一眼换根DP啊 首先,我们考虑一下如何转换\(n^m\)这个式子, 先把式子摆出来吧:\(n^m=\sum_{j=0}^mS(m,j)C_n^jj!\) 其中\(S(m,j)\)表示第 ...

  4. nginx反向代理tomcat 时，出现https redirect后变成http的问题解决方法

    需要修改两个配置 1.nginx配置 location / { proxy_pass http://test-server; proxy_set_header Host $host; proxy_se ...

  5. kubernetes 的configMap和sercet配置信息

    简介: 启动pod,pod启动时可以将configMap资源关联到当前pod上来,从中读一个数据c传递给pod内的容器的一个变量.任然是变量注入的方式来给容器传配置信息. 把每一个configMap当 ...

  6. 点击事件解绑unbind

    $(".choose").unbind("click").click(function(){} 这个类先解绑了点击事件再添加个点击事件有事如果不这样你点击第二次 ...

  7. selenium的方法

    # Licensed to the Software Freedom Conservancy (SFC) under one # or more contributor license agreeme ...

  8. GIT上面有的分支,本地却无法检出,也看不到该分支

    正常情况在gitlib上面可以看到代码里面有develop的分支 然而本地在查看所有分支的时候却报错 #查看所有的分支 git branch -a 这种情况是没有更新远程分支的索引,所以这样是看不到的 ...

  9. Leetcode题目39.组合总和（回溯+剪枝-中等）

    题目描述: 给定一个无重复元素的数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的数字可以无 ...

  10. 【零基础】简单说说一键果体APP的AI

    参考: https://www.jianshu.com/p/8c7a7cb7198c https://blog.csdn.net/gdymind/article/details/82696481 零. ...