React中的refs的使用教程


Posted in Javascript onFebruary 13, 2018

ref是React中的一种属性,当render函数返回某个组件的实例时,可以给render中的某个虚拟DOM节点添加一个ref属性,如下面的代码所示:

<body> 
  <script type="text/jsx"> 
    var App = React.createClass({ 
      render: function() { 
        return ( 
          <div> 
            <input type="text" placeholder="input something..." ref="input" /> 
          </div> 
        ); 
      } 
    }); 
    React.render( 
      <App />, 
      document.body 
    ); 
  </script> 
</body>

在上面的代码中,render函数里仅仅返回了一个<div>标签,<div>里仅有一个<input>标签,在<input>标签的属性中,添加了一个ref属性,官方文档上对于ref属性的解释如下:

ref 属性

React 支持一种非常特殊的属性,你可以用来绑定到 render() 输出的任何组件上去。这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例。

给<input>标签设置ref属性有什么用途呢?下面是官方文档给出的解释:

在其它代码中(典型地事件处理代码),通过 this.refs 获取支撑实例( backing instance ),就像这样:this.refs.input。其中"input"就是上面给<input>标签设置的ref属性的值。

通过ref属性,我们还可以拿到该虚拟DOM对应的真实DOM节点,有两种方法可以拿到真实DOM节点,如下代码所示:

<input type="text" ref="username" /> 
//下面4种方式都可以通过ref获取真实DOM节点 
var usernameDOM = this.refs.username.getDOMNode(); 
var usernameDOM = React.findDOMNode(this.refs.username); 
var usernameDOM = this.refs['username'].getDOMNode(); 
var usernameDOM = React.findDOMNode(this.refs['username']);

下面通过一个demo来了解ref的使用:

demo在浏览器中运行的效果如下图:

React中的refs的使用教程

在最上面的输入框中输入任意1-10的数字,即可让下面10个输入框中对应的输入框获取焦点,如上图,输入3后,下面第3个输入框马上获取焦点,这里就用到了ref属性,代码如下:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Refs</title> 
  <script type="text/javascript" src="../react-0.13.0/build/react.js"></script> 
  <script type="text/javascript" src="../react-0.13.0/build/JSXTransformer.js"></script> 
</head> 
<body> 
  <script type="text/jsx"> 
    var App = React.createClass({ 
      handleChange: function(event) { 
        var index = event.target.value; 
        if(index >= 1 && index <= 10) { 
          //找到对应的输入框并将焦点设置到里面 
          var refName = "input" + index; 
          //var inputDOM = React.findDOMNode(this.refs[refName]); 
          var inputDOM = this.refs[refName].getDOMNode(); 
          inputDOM.focus(); 
        } 
      }, 
      render: function() { 
        var inputs = []; 
        for(var i = 1; i <= 10; i++) { 
          inputs.push(<div><li><input type="text" ref={"input" + i}/></li><br/></div>); 
        } 
        return ( 
          <div> 
            <label htmlFor="input" >在这里输入下面任意输入框的索引,光标会自动定位到输入框内:</label> 
            <input type="text" id="input" onChange={this.handleChange} /> 
            <hr /> 
            <ol> 
              {inputs} 
            </ol> 
          </div> 
        ) 
      } 
    }); 
    React.render( 
      <App />, 
      document.body 
    ); 
  </script> 
</body> 
</html>

在render函数中,为html文档的body部分添加了10个输入框,每个输入框的ref属性都设置成了["index" + 索引]的这种方式,然后在最上面的输入框的handleChange函数中,获取输入的数字,并得到ref属性的值,最后根据ref属性的值,找到对应的真实DOM节点,然后让该DOM节点获取焦点。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
验证javascript中Object和Function的关系的三段简单代码
Jun 27 Javascript
ajax的hide隐藏问题解决方法
Dec 11 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
如何通过JS实现转码与解码
Feb 21 Javascript
tween.js缓动补间动画算法示例
Feb 13 #Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 #Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 #Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 #Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 #Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 #Javascript
Vue+webpack项目基础配置教程
Feb 12 #Javascript
You might like
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
jquery 简单导航实现代码
2009/09/11 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
Python的subprocess模块总结
2014/11/07 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
Python同步遍历多个列表的示例
2019/02/19 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
python 字符串常用方法汇总详解
2019/09/16 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
Keras 使用 Lambda层详解
2020/06/10 Python
python 怎样进行内存管理
2020/11/10 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
接口的多继承会带来哪些问题
2015/08/17 面试题
读书活动总结范文
2014/04/26 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
护理工作心得体会
2016/01/22 职场文书
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫