一、使用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. shell爬取斗图网

    #!/bin/bash read -p "请输入要爬取的页面数(默认为10):" page_num page_num=${page_num:-} echo $page_num re ...

  2. mysql: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)

    https://www.cnblogs.com/jpfss/p/9734487.html (mysql.sock错误解决方案)

  3. OFDM发端硬件实现原理图

    OFDM时域削峰法的详细说明可参考:https://www.cnblogs.com/achangchang/p/11037498.html

  4. python中模块、包、库的区别和使用

    模块:就是.py文件,里面定义了一些函数和变量,需要的时候就可以导入这些模块. 包:在模块之上的概念,为了方便管理而将文件进行打包.包目录下第一个文件便是 __init__.py,然后是一些模块文件和 ...

  5. Java实现浏览器大文件分片上传

     上周遇到这样一个问题,客户上传高清视频(1G以上)的时候上传失败. 一开始以为是session过期或者文件大小受系统限制,导致的错误. 查看了系统的配置文件没有看到文件大小限制, web.xml中s ...

  6. luogu 1169 [ZJOI2007]棋盘制作 悬线dp

    悬线法,虽然得不到局部最优解,但是一定能得到全局最优解的算法,十分神奇~ #include <cstdio> #include <algorithm> #define N 20 ...

  7. TTTTTTTTTTTTTTTT hdu 5727 Necklace 阴阳珠 二分图匹配+暴力全排列

    Necklace Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Su ...

  8. [Luogu] 维护序列

    https://www.luogu.org/problemnew/show/P2023 线段树双懒标记下放 #include <bits/stdc++.h> using namespace ...

  9. Laravel 配置

    首页 问答社区 中文文档 API Composer Github 配置说明 框架下载好了,但是想要很好的使用,可能我们还有一些东西需要知道,这就是配置.和项目有关的配置是在 app/config 文件 ...

  10. antd源码分析之——对话框（modal）

    目录 一.组件结构 1.antd代码结构 2.rc-ant代码结构 3.组件结构 二.antd组件调用关系及功能详解 1.Model.tsx 2.confirm 三.rc-dialog详解 1.e.t ...