一、使用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. Java8-Stream-No.01

    import java.util.ArrayList; import java.util.List; import java.util.Optional; public class Streams1 ...

  2. mysql自增主键清零方法

    MySQL数据库自增主键归零的几种方法 如果曾经的数据都不需要的话,可以直接清空所有数据,并将自增字段恢复从1开始计数: truncate table table_name; 1 当用户没有trunc ...

  3. jsp前台输入框不输入值，后台怎么取出整型？

    当前台输入框限定整型,后台取值就会出现很多问题. eg: Integer.parseInt(request.getParameter("uno"));当前台的文本框不输入值,直接点 ...

  4. struts2 404错误

    action类必须放在xxxx.xxx.xxx.xxx.action  包下才可以.

  5. noi 统计前k大的数

    描述 给定一个数组,统计前k大的数并且把这k个数从大到小输出. 输入 第一行包含一个整数n,表示数组的大小.n < 100000. 第二行包含n个整数,表示数组的元素,整数之间以一个空格分开.每 ...

  6. Java事务不回滚的原因总结

    1.首先要检查数据的引擎,InnoDB支持事务,MyIsam不支持事务 2.  默认spring事务只在发生未被捕获的 runtimeexcetpion时才回滚.     spring aop  异常 ...

  7. Appium基础教程

    目录 Appium教程 Appium简介 App自动化测试工具对比 Appium实现原理 环境搭建 Andorid介绍 基本架构 常见布局/视图 基本控件 控件常见属性 Adb介绍 Adb常用命令 A ...

  8. python 显示!到~的字符

    count = ): != : print(chr(i),end=" ") else: print(chr(i)) count += 输出 ! " # $ % & ...

  9. python国内镜像源

    让python pip使用国内镜像 国内源: 清华:https://pypi.tuna.tsinghua.edu.cn/simple 阿里云:http://mirrors.aliyun.com/pyp ...

  10. 什么是跨平台性？原理是什么？JVM

    所谓跨平台性,是指java语言编写的程序,一次编译后,可以在多个系统平台上运行. 实现原理:Java程序是通过java虚拟机在系统平台上运行的,只要该系统可以安装相应的java虚拟机,该系统就可以运行 ...