React Refs
React Refs
React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。
这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例。
ref 属性的值可以是一个字符串也可以是一个函数。
使用方法
绑定一个 ref 属性到 render 的返回值上:
<input ref="myInput" />
在其它代码中,通过 this.refs 获取支撑实例:
var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();
完整实例
你可以通过使用 this 来获取当前 React 组件,或使用 ref 来获取组件的引用,实例如下:
var MyComponent = React.createClass({
handleClick: function() {
// 使用原生的 DOM API 获取焦点
this.refs.myInput.focus();
},
render: function() {
// 当组件插入到 DOM 后,ref 属性添加一个组件的引用于到 this.refs
return (
<div>
<input type="text" ref="myInput" />
<input
type="button"
value="点我输入框获取焦点"
onClick={this.handleClick}
/>
</div>
);
}
}); ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
React Refs的更多相关文章
- React Refs All In One
React Refs All In One https://reactjs.org/docs/react-api.html#refs Ref https://reactjs.org/docs/refs ...
- React/Refs and this DOM
Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素. 何时使用Refs 管理焦点,文本选择或媒体播放. 触发强制动画. 集成第三方 DOM 库. 避 ...
- React refs 的理解
一.是什么 Refs 在计算机中称为弹性文件系统(英语:Resilient File System,简称ReFS) React 中的 Refs提供了一种方式,允许我们访问 DOM节点或在 render ...
- React 中的 refs的应用
React Refs React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上. 这个特殊的属性允许你引用 render() 返回的相应的支撑实例( back ...
- React Native & Android & iOS
React Native & Android & iOS React Native & Android & iOS https://facebook.github.io ...
- (私人收藏)React教程手册
React教程手册 https://pan.baidu.com/s/1ka2PJ54HgqJ8lC6XgbvdLg pedx React 教程 含有3个附件,如下: react.js react-do ...
- Reactjs 入门基础(三)
State 和 Props以下实例演示了如何在应用中组合使用 state 和 props .我们可以在父组件中设置 state, 并通过在子组件上使用 props 将其传递到子组件上.在 render ...
- 袋鼠云研发手记 | 袋鼠云EasyManager的TypeScript重构纪要
作为一家创新驱动的科技公司,袋鼠云每年研发投入达数千万,公司80%员工都是技术人员,袋鼠云产品家族包括企业级一站式数据中台PaaS数栈.交互式数据可视化大屏开发平台Easy[V]等产品也在迅速迭代.在 ...
- [React Fundamentals] Using Refs to Access Components
When you are using React components you need to be able to access specific references to individual ...
随机推荐
- unity2d开发windows phone游戏按钮问题
今天在进行unity2d项目对windows phone工程的编译过程中,发现了一个很蛋疼的bug,windows phone编译运行后,GUILayout.Button出现自动点击的现象,这带来了很 ...
- 51Node 1051---最大子矩阵和
题目链接 一个M*N的矩阵,找到此矩阵的一个子矩阵,并且这个子矩阵的元素的和是最大的,输出这个最大的值. 例如:3*3的矩阵: -1 3 -1 2 -1 3 -3 1 2 和最大的子矩阵是 ...
- VMware12 安装 Ubuntu18.04
安装Ubuntu18.04虚拟机 Ubuntu获取地址: 官网:https://www.ubuntu.com/download/server 清华镜像站:https://mirrors.tuna.ts ...
- Python内置类型(4)--数值
Python有以下三种的数值类型: 整型(integers), 浮点型(floating point numbers), 以及 复数(complex numbers).此外,布尔是整数的子类型. 数值 ...
- Win10上安装TensorFlow(官方文档翻译)
一.推荐两个网站 TensorFlow官方文档:https://www.tensorflow.org/install/install_windows TensorFlow中文社区:http://www ...
- 课程四(Convolutional Neural Networks),第一周(Foundations of Convolutional Neural Networks) —— 0.Learning Goals
Learning Goals Understand the convolution operation Understand the pooling operation Remember the vo ...
- 今天讲座的感悟--java
发现当你擅长于某一专业,永远那专业上的人才挤挤.倘若你和相邻专业结合,就能更厉害的走在交叉专业上.例如:医学加计算机等 待续...
- Jenkins 批量删除历史构建
在一次巡查 Jenkins 时,发现很多个项目的历史构建比较多,这些历史构建对于现在来说又没有什么用处,那么想把它删除,但是一个一个删除很累,毕竟总共加起来有上千个,历史构建,而且还不只是一个项目.那 ...
- solr源码分析之数据导入DataImporter追溯。
若要搜索的信息都是被存储在数据库里面的,但是solr不能直接搜数据库,所以只有借助Solr组件将要搜索的信息在搜索服务器上进行索引,然后在客户端供客户使用. 1. SolrDispatchFilter ...
- lightswitch 添加 TreeView 控件
代码片段 <UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk&q ...