React中this丢失的四种解决方法


Posted in Javascript onMarch 12, 2019

发现问题

我们在给一个dom元素绑定方法的时候,例如:

<input type="text" ref="myinput" accept = "image/*" onChange = {this.selectFile} />

React组件中不能获取refs的值,页面报错提示:Uncaught TypeError: Cannot read property 'refs' of null or undefind

小栗子

import React from 'react';
import $ from 'jquery'
import '../app.scss';

export default class MyForm extends React.Component {
 submitHandler (event) {
  event.preventDefault();
  console.log(this.refs.helloTo);
  var helloTo = this.refs.helloTo.value;
  alert(helloTo);
 }
 render () {
  return (
   <form onSubmit={this.submitHandler}>
     <input ref='helloTo' type='text' defaultValue='Hello World! ' />
     <button type='submit'>Speak</button>
    </form>
  )
 }
}

React中的bind同上方原理一致,在JSX中传递的事件不是一个字符串,而是一个函数(如:onClick={this.handleClick}),此时onClick即是中间变量,所以处理函数中的this指向会丢失。解决这个问题就是给调用函数时bind(this),从而使得无论事件处理函数如何传递,this指向都是当前实例化对象。

解决

解决方案有4种

1、在ES6中可以在构造函数中,直接将当前组件(或者叫类)的实例与函数绑定。

2、在方法调用的时候绑定this

如: <input type="file" ref="myinput" accept = "image/*" onChange = {this.selectFile.bind(this)} />

3、在方法编写结尾的时候绑定this,bind(this)

如:

submitHandler(){
 console.log(1)
}.bind(this)

4、使用es6 箭头函数 myfn = () =>{ console.log(this.refs.can) }

推荐使用箭头函数,因为最近刚换到react 来,没怎么看就直接cli 来怼,遇到一些小问题记录于此

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
jQuery 使用个人心得
Feb 26 Javascript
JavaScript 在各个浏览器中执行的耐性
Apr 06 Javascript
jQuery DOM操作小结与实例
Jan 07 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
JS如何判断json是否为空
Jul 06 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
使用koa2创建web项目的方法步骤
Mar 12 #Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 #Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 #Javascript
通过JS运行机制的角度说说作用域
Mar 12 #Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 #jQuery
如何使用pm2快速将项目部署到远程服务器
Mar 12 #Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 #Javascript
You might like
PHP中显示格式化的用户输入
2006/10/09 PHP
十天学会php之第十天
2006/10/09 PHP
PHP实现异步调用方法研究与分享
2011/10/27 PHP
PHP图片上传代码
2013/11/04 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
php和nginx交互实例讲解
2019/09/24 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
写好求职信第一句话的技巧
2013/10/26 职场文书
会计实习自我鉴定
2013/12/04 职场文书
学校校庆演讲稿
2014/05/22 职场文书
演讲稿开场白台词
2014/08/25 职场文书
辛亥革命观后感
2015/06/02 职场文书