一、使用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. Jquery调用Ajax实现联动使用json

    在很多时候我们都会使用到联动.jquery.js是一个不错的js框架.其ajax也挺不错.下面将实现一个js联动:选择公司出来受益人.根据公司不同受益人不同. 前提是:你用引入jquery.js &l ...

  2. 深度学习笔记（十三）YOLO V3 (Tensorflow)

    [代码剖析]   推荐阅读! SSD 学习笔记 之前看了一遍 YOLO V3 的论文,写的挺有意思的,尴尬的是,我这鱼的记忆,看完就忘了  于是只能借助于代码,再看一遍细节了. 源码目录总览 tens ...

  3. 调用七牛云存储文件，返回url

    文档地址:https://developer.qiniu.com/kodo/sdk/1283/javascript#2 npm引入 npm install qiniu-js 例子: var obser ...

  4. 【java设计模式】-06原型模式

    原型模式简述 定义: 使用原型实例指定待创建对象的类型,并且通过复制这个原型来创建新的对象 ,也就是通过复制现有对象实例产生新的对象,也就是所谓的"克隆" 实现方式: 1.实现Cl ...

  5. 【java设计模式】-04单例模式

    单例模式 定义: 确保一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 类型: 创建类模式 类图: 单例模式特点 1.单例类只能有一个实例. 2.单例类必须自己创建自己的唯一实例. 3.单 ...

  6. UVA 11174 Stand in a Line，UVA 1436 Counting heaps —— （组合数的好题）

    这两个题的模型是有n个人,有若干的关系表示谁是谁的父亲,让他们进行排队,且父亲必须排在儿子前面(不一定相邻).求排列数. 我们假设s[i]是i这个节点,他们一家子的总个数(或者换句话说,等于他的子孙数 ...

  7. load加载层

    //eg1 var index = layer.load(); //eg2 var index = layer.load(1); //换了种风格 //eg3 var index = layer.loa ...

  8. 简述JAVA类的生命周期

    介绍 一个java类的完整的生命周期会经历加载.连接.初始化.使用.和卸载五个阶段: 加载 主要是:把类的信息加载到方法区中,并在堆中实例化一个Class对象. 加载方式 根据类的全路径加载class ...

  9. Nginx之最简单的反向代理机制分析

    注:当前分析基于 Nginx之搭建反向代理实现tomcat分布式集群 的配置. 1. 用到的指令 下面介绍在上面的配置中用到的指令. upstream 指令 语法:upstream name { .. ...

  10. koa 实现上传文件

    项目目录: 1.上传单个文件 思路: (1)获取上传文件,使用 const file = ctx.request.files.file (2)我们使用 fs.createReadStream 来读取文 ...