React组件refs的使用详解


Posted in Javascript onFebruary 09, 2018

ref顾名思义我们知道,其实它就可以被看座是一个组件的参考,也可以说是一个标识。作为组件的属性,其属性值可以是一个字符串也可以是一个函数。

其实,ref的使用不是必须的。即使是在其适用的场景中也不是非用不可的,因为使用ref实现的功能同样可以转化成其他的方法来实现。但是,既然ref有其适用的场景,那也就是说ref自有其优势。关于这一点和ref的适用场景,官方文档中是这样说的:

在从 render 方法中返回 UI 结构之后,你可能想冲出 React 虚拟 DOM 的限制,在 render 返回的组件实例上调用某些方法。通常来说,这样做对于应用中的数据流动是不必要的,因为活跃的数据( Reactive data )流总是确保最新的 props 被传递到每一个从 render() 输出的子级中去。然而,仍然有几个场景使用这种方式是必须的,或者说是有益的:查找渲染出的组件的DOM标记(可以认为是DOM的标识ID),在一个大型的非React应用中使用React组件或者是将你现有的代码转化成React。

下面我们来看这样的一个场景(下面的例子经常被用于ref的讲解,可见下面描述的场景应该是比较经典的):通过某个事件使<input />元素的值被设为空字符串,然后使该<input />元素获得焦点。

var App = React.createClass({
  getInitialState: function() {
   return {userInput: ''};
  },
  handleChange: function(e) {
   this.setState({userInput: e.target.value});
  },
  clearAndFocusInput: function() {
   this.setState({userInput: ''}); // 设置值为空字符串
        //这里想要实现获得焦点   
  },
  render: function() {
   return (
    <div>
     <input
      value={this.state.userInput}
      onChange={this.handleChange}
     />
          <input type="button"
           value="Reset And Focus"
           onClick={this.clearAndFocusInput}
        />
    </div>
   );
  }
 });

在上面例子中,我们已经实现了点击按钮通知input元素将值设为空字符串,但是还没有实现使input元素获得焦点。这实现起来有些困难,因为在render()中返回的并不是实际的子组件的组合,仅仅是一个特定时间特定实例的描述。这句话感觉挺绕的,其实render返回的是虚拟的DOM,并不是真实的DOM。因此我们不需要仅仅着眼于那些从render()中返回的那些组件。

那说到这,对于我们如何实现获得焦点并没有太大的帮助。要想实现获得焦点这个功能我们需要借助ref来实现。上面我们提到过ref的值有两种类型,一种是字符串、一种是回调函数。

ref字符串上属性

React支持一个特殊的属性,你可以将这个属性加在任何通过render()返回的组件中。这也就是说对render()返回的组件进行一个标记,可以方便的定位的这个组件实例。这就是ref的作用。

ref的形式如下

<input ref="myInput" />

要想访问这个实例,可以通过this.refs来访问:

this.refs.myInput

先前版本中,我们可以通过React.findDOMNode(this.refs.myInput)来访问组件的DOM。但是现在,已经放弃了findDOMNode函数了,可以直接使用this.refs.myInput来进行访问。

ref回调函数

ref属性也可以是一个回调函数而不是一个名字。   这个函数将要在组件被挂载之后立即执行。这个参照的组件将会作为该函数的参数,这个函数可以立即使用这个组件参数,当然也可以将其保存供以后使用。

其形式也比较简单:

render: function() {
  return <TextInput ref={(c) => this._input = c} } />;
},
componentDidMount: function() {
  this._input.focus();
},

或者是

render: function() {
  return (
   <TextInput
    ref={function(input) {
     if (input != null) {
      input.focus();
     }
    }} />
  );
},

这里需要注意,当这个参照组件被卸载并且这个ref改变的时候,先前的ref的参数值将为null。这将有效的防止了内存的泄露。所以在上面代码中会有if判断:

if(input != null){
     input.focus();
}

上面介绍了ref的使用场景和方法,下面我们就将上面的例子来补充完整,从而实现获得焦点的功能

var App = React.createClass({
  getInitialState: function() {
    return {userInput: ''};
  },
  handleChange: function(e) {
    this.setState({userInput: e.target.value});
  },
  clearAndFocusInput: function() {
    this.setState({userInput: ''}); // Clear the input
    // We wish to focus the <input /> now!
    if (this.refs.myTextInput !== null) {
      this.refs.myTextInput.focus();
    }
  },
  render: function() {
    return (
      <div>
        <input
          value={this.state.userInput}
          onChange={this.handleChange}
          ref=”myTextInput”   
                     />
        <input
          type="button"
          value="Reset And Focus"
          onClick={this.clearAndFocusInput}
          />
      </div>
    );
  }
});
ReactDOM.render(
  <App />,
  document.getElementById('content')
);

在这个例子中, render 函数返回一个 <input /> 实例的描述。但是真正的实例通过 this.refs. myTextInput获取。只要 render 返回的某个子组件带有 ref="myTextInput" ,this.refs. myTextInput就会获取到正确的实例。

上面就是ref的所有内容,更多关于ref的介绍可以参考Ref to Components。

对于ref我们就介绍到这,希望本文对大家有所帮助。也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS操作图片(增,删,改) 例子
Apr 17 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 Javascript
jquery无缝图片轮播组件封装
Nov 25 jQuery
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 #Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 #Javascript
js自定义trim函数实现删除两端空格功能
Feb 09 #Javascript
JavaScript运行原理分析
Feb 09 #Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 #Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 #Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 #Javascript
You might like
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
PHP查询网站的PR值
2013/10/30 PHP
PHP中cookie知识点学习
2018/05/06 PHP
javascript getElementsByName()的用法说明
2009/07/31 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
python计算两个数的百分比方法
2018/06/29 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
python爬虫基础之urllib的使用
2020/12/31 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
行政助理求职自荐信
2013/10/26 职场文书
初中地理教学反思
2014/01/11 职场文书
运动会入场词
2015/07/18 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书