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 相关文章推荐
Mootools 1.2教程 滑动效果(Slide)
Sep 15 Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 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
php mail to 配置详解
2014/01/16 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
php报错502badgateway解决方法
2019/10/11 PHP
function, new function, new Function之间的区别
2007/03/08 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
jquery密码强度校验
2015/12/02 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
Python实现把回车符\r\n转换成\n
2015/04/23 Python
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
python读取oracle函数返回值
2016/07/18 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
python的turtle库使用详解
2019/05/10 Python
python如何实现异步调用函数执行
2019/07/08 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
资产评估专业大学生求职信
2013/09/29 职场文书
签约仪式主持词
2014/03/19 职场文书
《长江之歌》教学反思
2014/04/17 职场文书
高中校园广播稿
2014/10/21 职场文书
会计求职自荐信
2015/03/26 职场文书
汉字听写大会观后感
2015/06/12 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
Redis Stream类型的使用详解
2021/11/11 Redis