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 web对话框与弹出窗口
Feb 22 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
vue实现弹幕功能
Oct 25 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
vue实现数字滚动效果
Jun 29 Javascript
javascript函数式编程基础
Sep 15 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来处理多个提交任务
2008/05/08 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
php函数连续调用实例分析
2015/07/30 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
PHP使用函数用法详解
2018/09/30 PHP
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
python操作MongoDB基础知识
2013/11/01 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
pytorch 预训练层的使用方法
2019/08/20 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
Python autoescape标签用法解析
2020/01/17 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
偷看我的初中毕业鉴定
2014/01/29 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
委托书英文
2015/01/28 职场文书
万里长城导游词
2015/01/30 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL