React中的refs的使用
来源:互联网 发布:ubuntu rm rf 编辑:程序博客网 时间:2024/05/24 07:10
ref是React中的一种属性,当render函数返回某个组件的实例时,可以给render中的某个虚拟DOM节点添加一个ref属性,如下面的代码所示:
在上面的代码中,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节点,如下代码所示:
下面通过一个demo来了解ref的使用:demo在浏览器中运行的效果如下图:
在最上面的输入框中输入任意1-10的数字,即可让下面10个输入框中对应的输入框获取焦点,如上图,输入3后,下面第3个输入框马上获取焦点,这里就用到了ref属性,代码如下:
阅读全文
0 0
- React中的refs的使用
- 7、React中的refs的使用
- React refs的使用
- React组件中的refs
- React中如何使用refs
- 正确使用react的refs/props/state及其它
- React refs
- 对组件的引用(refs)react
- vue2.0 $refs的使用
- react——refs
- React组件refs详解
- React组件refs详解
- react中操作dom的方法之---refs
- react中的ref的使用
- vue组件($children,$refs,$parent)的使用
- vue组件($children,$refs,$parent)的使用
- Vue之ref与refs的使用
- React-"Refs and the DOM"
- Android Studio 自定义设置注释模板
- 树状数组的应用
- ffmpeg+EasyDSS流媒体服务器实现稳定的rtmp推流直播
- linux下hotplug_uevent机制(热插拔机制)
- Linux初学
- React中的refs的使用
- 易语言数组内容乱序
- 3DMAX贴图无法显示
- Linux c 二叉搜索树(节点创建、插入BST)
- base标签
- Android Studio 调用百度地图
- CentOS 7 yum安装nginx-1.12.0
- poj 3122 Pie(二分)
- Vue路由History mode模式中页面无法渲染的原因及解决