一、使用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. oracle impdp 覆盖导入 table_exists_action关键字使用

    oracle10g之后impdp的table_exists_action参数table_exists_action选项:{skip 是如果已存在表,则跳过并处理下一个对象:append是为表增加数据: ...

  2. 解决从其他地方拷贝过来的Android项目在本机不能运行（报错）的问题

    这个问题一般是由gradle版本不同引起的.要解决可以这样: 一.在确保本机Android studio 正常使用的情况下,在本机新建一个Android项目 二.在文件夹中打开新建的Android项目 ...

  3. MySQL Workbench 导入导出乱码解决方法

    1.点击导出 2.默认选择cvs 3.打开后发现乱码 4.用记事本的方式打开会发现编码正常 5.文件->另存为,会发现编码为UTF-8,正是MySQL表的编码方式.我们选择编码方式为ANSI,保 ...

  4. 题解 [BZOJ1925][SDOI2010] 地精部落

    题面 解析 这个似乎并不好讲啊 设\(f[i][j]\)表示有\(i\)座山, 最后一座山到达高度是\(i\)座中第\(j\)大的, 且最后一座山是山谷. 注意,\(i\)是代表有\(i\)座山,并不 ...

  5. 【方法】JS判断当前页面环境：PC端/移动端，安卓/IOS，微信环境/QQ环境等等

    [主要知识] 浏览器设备信息:navigator.userAgent(本文中主要用到知识) 浏览器版本信息:navigator.appVersion var ua = navigator.userAg ...

  6. jQuery系列（五）：jQuery操作input的value值

    表单控件是重中之重,因为一旦牵扯到数据交互,离不开form表单的使用,比如用户的注册登录功能等. jQuery操作表单控件的方法: $(selector).val()//设置值和获取值 1.实例代码 ...

  7. POJ 1144 Network —— （找割点）

    这是一题找无向图的割点的模板题,割点的概念什么的就不再赘述了.这里讲一下这个模板的一个注意点. dfs中有一个child,它不等于G[u].size()!理由如下: 如上图,1的size是2,但是它的 ...

  8. LeetCode 最长公共前缀（探索字节跳动）

    题目描述 编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串 "". 示例 1: 输入: ["flower","flow ...

  9. Twisted框架学习

    Twisted是用Python实现的基于事件驱动的网络引擎框架,是python中一个强大的异步IO库.理解twisted的一个前提是弄清楚twisted中几个核心的概念: reactor, Proto ...

  10. CefGlue获取网页源代码

    1.编写一个CefStringVisitor类: public class MyStringVisitor : CefStringVisitor { private readonly TaskComp ...