react里面的this_react事件中的this指向

在react中绑定事件处理函数的this指向一共有三种方法，本次主要总结这三种方式。

项目创建

关于项目的创建方法，在之前的文章中有记录，这里不再赘述，项目创建成功后，按照之前的目录结构对生成的项目进行调整，新建一个Home.js组件，并在App.js中引入该组件。

Home.js

import React from 'react';

class Home extends React.Component{

constructor(props){

super(props);

this.state={

msg:'我是Home组件'

}

}

render(){

return(

{this.state.msg}

)

}

}

export default Home;

App.js

import React, { Component } from 'react';

import './assets/css/App.css';

import Home from './components/Home'

class App extends Component {

render() {

return (

这里是根组件

);

}

}

export default App;

基本事件方法

首先以点击事件为例，需要有触发事件的点击按钮，需要有事件执行方法，具体写法如下：

当我们点击按钮的时候就会执行上面的run方法，需要注意的是，run方法结束后是不带符号的。

事件中获取数据

按照上面的写法，当我们需要在方法中使用数据的时候，最先想到的就是下面这种写法了：

可结果并不是我们预期的顺利，此时因为this的指向出现问题而报错了，因为我们预期的this是当前组件，而不是当前执行的方法。

所以，此时需要改变this的指向，常见有下面三种方法：

方法一：通过bind来指明当前方法中的this指向当前Home.js组件

方法二：在构造函数constructor中改变this指向。

方法三：使用箭头函数改变this指向。

事件中改变数据

在获取数据的时候需要处理this指向，自然在改变数据的时候也需要处理this指向问题，所以改变数据也对应有三种方法。

Home.js

import React from 'react';

class Home extends React.Component{

constructor(props){

super(props);

this.state={

msg:'我是Home组件的数据一',

text:'我是Home组件的数据二',

info:'我是Home组件的数据三',

}

this.change = this.change.bind(this);

}

run(){

this.setState({msg:'我是方法一'})

}

change(){

this.setState({text:'我是方法二'})

}

updata=()=>{

this.setState({info:'我是方法三'})

}

render(){

return(

{this.state.msg}

{this.state.text}

{this.state.info}

改变数据1

改变数据2

改变数据3

)

}

}

export default Home;

react事件中的事件对象和常见事件

不管是在原生的js还是vue中,所有的事件都有其事件对象,该事件对象event中包含着所有与事件相关的信息,在react中,所有的事件也有其事件对象,在触发DOM上的某个事件时,就会产生一个事件对象. ...

JavaScript中this的指向(转载)

转载自:http://www.cnblogs.com/dongcanliang/p/7054176.html 前言 this 指向问题是入坑前端必须了解知识点,现在迎来了ES6时代,因为箭头函数的出现 ...

React之函数中的this指向

我们都知道在React中使用函数时,有两种写法,一是回调函数,二是直接调用,但需要在构造函数中绑定this,只有这样,函数中的this才指向本组件 总结一下没有绑定this的函数中的this指向 不管 ...

JS中的this 指向问题

我发现在对JS的学习中有很多朋友对this的指向问题还是有很大的误区或者说只是大致了解,但是一旦遇到复杂的情况就会因为this指向问题而引发各种bug. 对于之前学习过c或者是Java的朋友来说可能这 ...

React事件杂记及源码分析

前提 最近通过阅读React官方文档的事件模块,发现了其主要提到了以下三个点  调用方法时需要手动绑定this  React事件是一种合成事件SyntheticEvent,什么是合成事件?  事件属性 ...

在React开发中遇到的问题——数组引用赋值

在React开发中遇到了一个问题: 需求是在一个选择组件中选择数据mydata数组,确定后将mydata数组返回到父组件,再次打开该选择组件时,从父组件获取之前选择的数据mydata并显示为已选择. ...

JavaScript中this究竟指向什么？

摘要: 神奇的this! 原文:JS 中 this 在各个场景下的指向 译者:前端小智 Fundebug经授权转载,版权归原作者所有. 1. this 的奥秘 很多时候, JS 中的 this 对于咱 ...

JS中this的指向问题&使用call或apply模拟new

this的指向由调用时决定而不是定义时决定,定义的方式: //直接定义在函数里 var a="window中的a"; var name="window"; fu ...

随机推荐

SQL 查询总结

参考资料: SELECT 查询语句格式与简单查询 SQL中distinct的用法 SQL 查询总结

【noip2014T3】

上文有提到noip2014还有没A的嘛..就先把这个坑给填了 flappy bird好sad啊 还是先做解方程 八中的数据好强了,然而我最后凑了四个质数就A了,感谢shy! 作为联赛最后一题,学习它的 ...

去除TFS版本控制信息

为了避免对版本库的影响,可以自己离线的修改代码,就要脱离TFS的管理,解决方案: 1.找到*.sln文件用文本打开,可以找到: Global GlobalSection(SolutionConfigu ...

ubuntu后台运行命令行

ubuntu 程序后台运行几个方法 . 程序后加上“&” ,即 “./myjob &”, 将命令放入到一个作业队列中,可以用命令“jobs” 查看 . 将1中的命令放在 “()”中, ...

[CSAPP笔记][第十一章网络编程]

第十一章 网络编程 我们需要理解基本的客户端-服务端编程模型,以及如何编写使用因特网提供的服务的客户端-服务端程序. 最后,我们将把所有这些概念结合起来,开发一个小的但功能齐全的Web服务器,能够为真 ...

Unix/Linux环境C编程入门教程(26) 字符数字那些事儿

1.gcvt() strtod() strtol() strtoul() toascii() tolower() toupper函数介绍 gcvt(将浮点型数转换为字符串,取四舍五入) 相关函数 ec ...

scss实现不同方向的三角

//定义一个三角的函数 实现不同方向的三角加兼容ie6//第一个参数传入方向//第二个参数传入大小//第三个参数传入颜色//注意:传入参数中间必须逗号分隔@mixin triangle($x, $y: ...

ARTIFICIAL INTELLIGENCE FOR GAMES (Ian Millington / John Funge 著)

相关网站:http://www.ai4g.com PART I AI AND GAMESCHAPTER1 INTRODUCTIONCHAPTER2 GAME AIPART II TECHNIQUESC ...

ajax传递数组给controller的实现方法和坑

这里是前端向后端传递一个数组的方式,参考下面这个示例: (主要是将前端的数组,用 JSON.stringify() 方法json化一下,然后后端springmvc接收到以后,使用 JSONArray  ...

Linux - 磁盘操作

Linux 磁盘常见操作 : df -Ph # 查看硬盘容量 df -T # 查看磁盘分区格式 df -i # 查看inode节点 如果inode用满后无法创建文件 du -h 目录 # 检测目录下所 ...