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 相关文章推荐
javascript随机之洗牌算法深入分析
Jun 07 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
使用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的header和asp中的redirect比较
2006/10/09 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
python调用shell的方法
2013/11/20 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
Django 反向生成url实例详解
2019/07/30 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
清洁工表扬信
2014/01/08 职场文书
微型企业创业投资计划书
2014/01/10 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
营业员岗位职责范本
2015/04/14 职场文书
用python画城市轮播地图
2021/05/28 Python
MySQL如何解决幻读问题
2021/08/07 MySQL