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

 更新时间:2019年03月12日 10:50:27   作者:薛定喵的谔   我要评论
这篇文章主要给大家介绍了关于React中this丢失的四种解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者使用React具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

发现问题

我们在给一个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 来怼,遇到一些小问题记录于此

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对澳门金沙网上娱乐的支持。

相关文章

  • 微信jssdk用法汇总

    微信jssdk用法汇总

    这篇文章主要针对微信jssdk用法进行汇总,通过ready接口处理成功验证、通过error接口处理失败验证等内容介绍,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • JS使用贪心算法解决找零问题示例

    JS使用贪心算法解决找零问题示例

    这篇文章主要介绍了JS使用贪心算法解决找零问题,简单描述了找零问题,并结合具体实例分析了javascript使用贪心算法解决找零问题的相关实现技巧,需要的朋友可以参考下
    2017-11-11
  • Bootstrap table表格初始化表格数据的方法

    Bootstrap table表格初始化表格数据的方法

    这篇文章主要介绍了Bootstrap-table表格初始化表格数据的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • 浅谈Javascript事件模拟

    浅谈Javascript事件模拟

    事件是用来描述网页中某一特定有趣时刻的,众所周知事件通常是在由用户和浏览器进行交互时触发,其实不然,通过Javascript可以在任何时间触发特定的事件,并且这些事件与浏览器创建的事件是相同的
    2012-06-06
  • js中遍历Map对象的方法

    js中遍历Map对象的方法

    下面小编就为大家带来一篇js中遍历Map对象的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 某人初学javascript的时候写的学习笔记

    某人初学javascript的时候写的学习笔记

    JavaScript对象就是一组属性(方法)的集合 在该语言中如果变量名或方法名不符合声明规范,则一定得用方括号“ [] ”引用它
    2010-12-12
  • 实例详解JavaScript中setTimeout函数的执行顺序

    实例详解JavaScript中setTimeout函数的执行顺序

    关于javascript的运行机制大家都应该有所了解了吧,其实javascript是一个单线程的机制,但是因为队列的关系它的表现会让我们感觉是一个多线程的错觉。下面这篇文章通过实例主要给大家介绍了关于JavaScript中setTimeout函数执行顺序的相关资料,需要的朋友可以参考下。
    2017-07-07
  • 给Flash加一个超链接(推荐使用透明层)兼容主流浏览器

    给Flash加一个超链接(推荐使用透明层)兼容主流浏览器

    给一个Flash加一个超链接,原想直接在object外直接套一个超链接即可,试了之后却发现不是这么回事
    2013-06-06
  • JavaScript拖动层Div代码

    JavaScript拖动层Div代码

    本文主要介绍了JavaScript拖动层Div的代码实例。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • javascript获取指定区间范围随机数的方法

    javascript获取指定区间范围随机数的方法

    下面小编就为大家带来一篇javascript获取指定区间范围随机数的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论