React从入门到精通系列之(14)refs和DOM元素
3.7k 次阅读 · 读完需要 8 分钟
十四、refs和DOM元素
在典型的React数据流中,props是父组件与其子组件交互的唯一方式。 要修改子组件,需要使用一个新的props进行重新渲染。
但是,在某些情况下,您需要在典型数据流之外强制修改子组件。 要修改的子组件可以是React组件实例,也可以是DOM元素。 对于这两种情况,React提供了一个以下这样的功能。
通过ref属性设置回调函数
React提供可以附加到任何组件的特殊属性。 ref
属性接受一个回调函数,回调函数将在组件被挂载或卸载后立即执行。
当在HTML元素上使用ref
属性时,ref
回调函数接收一个基础的DOM元素作为其参数。 例如,此代码使用ref
回调函数来存储对DOM节点的引用:
import React from 'react';
import ReactDOM from 'react-dom';
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.focus = this.focus.bind(this);
}
focus() {
// textInput是一个标准的DOM元素
this.textInput.focus();
}
render() {
return (
<div>
<input type="text" ref={input => {
this.textInput = input;
}}/>
<input type="button" value="选中上面的text input" onClick={this.focus}/>
</div>
);
}
}
ReactDOM.render(
<CustomTextInput/>,
document.getElementById('root')
);
当组件装载(mounting)时,React将使用DOM元素调用ref
回调函数,并在卸载时用null
调用它。
使用ref
回调函数是为类设置一个属性来访问DOM元素的常见模式。 如果您目前正在使用this.refs.myRefName
来访问DOM引用的话,我会建议你使用此模式。
当在自定义组件上使用ref
属性时,ref
回调接收组件的已装入的组件实例作为其参数。 例如,如果我们想要包装上面的CustomTextInput
来模拟它在装载(mounting)后立即被点击:
class AutoFocusTextInput extends React.Component {
componentDidMount() {
this.textInput.focus();
}
render() {
return (
<CustomTextInput ref={input => {this.textInput = input; }} />
);
}
}
您不能在功能性组件上使用ref
属性,因为它们没有实例。 但是,您可以使用功能性组件的render
函数内的ref
属性:
function CustomTextInput(props) {
// 这里必须提前顶一个textInput,只有这样才可以正常执行ref回调函数
let textInput = null;
function click() {
textInput.focus();
}
return (
<div>
<input type="text" ref={input => { textInput = input; }} />
<input type="button" value="选中这个输入框" onClick={click} />
</div>
);
}
不要过度使用ref
你的第一个倾向可能是使用refs
在你的应用中“make things happen”
。
如果是这种情况,你必须花一点时间,关键去考虑在组件层次结构中应该拥有什么状态。
通常,在层次结构中处于更高级别的组件“拥有”状态是一个让一切便清除的最适当位置。 有关示例,请参阅本系列的第10篇《提升state》。
React从入门到精通系列之(14)refs和DOM元素的更多相关文章
- 办公软件Office PPT 2010视频教程从入门到精通系列教程(22课时)
办公软件Office PPT 2010视频教程从入门到精通系列教程(22课时) 乔布斯的成功离不开美轮美奂的幻灯片效果,一个成功的商务人士.部门经理也少不了各种各样的PPT幻灯片.绿色资源网给你提供了 ...
- Provisioning Services 7.6 入门到精通系列之一:PVS前期规划
1. Provisioning Services 产品概述 Provisioning Services (简称PVS)采用了一种与传统映像解决方案截然不同的方法,从根本上改变了硬件与依托硬件而运行的 ...
- Jenkins pipeline 入门到精通系列文章
Jenkins2 入门到精通系列文章. Jenkins2 下载与启动jenkins2 插件安装jenkins2 hellopipelinejenkins2 pipeline介绍jenkins2 jav ...
- NHibernate从入门到精通系列
http://www.cnblogs.com/GoodHelper/archive/2011/02/17/1948744.html NHibernate从入门到精通系列(4)——持久对象的生命周期(上 ...
- Selenium 入门到精通系列:六
Selenium 入门到精通系列 PS:Checkbox方法 例子 HTML: <html> <head> <title>测试页面</title> &l ...
- Selenium 入门到精通系列:五
Selenium 入门到精通系列 PS:显式等待.隐式等待.强制等待方法 例子 #!/usr/bin/env python # -*- coding: utf-8 -*- # @Date : 2019 ...
- Selenium 入门到精通系列:四
Selenium 入门到精通系列 PS:鼠标右键.鼠标悬停.键盘操作方法 例子 #!/usr/bin/env python # -*- coding: utf-8 -*- # @Date : 2019 ...
- Selenium 入门到精通系列:三
Selenium 入门到精通系列 PS:Driver_Element 常用方法 例子 #!/usr/bin/env python # -*- coding: utf-8 -*- # @Date : 2 ...
- Selenium 入门到精通系列:二
Selenium 入门到精通系列 PS:用户登录 例子 #!/usr/bin/env python # -*- coding: utf-8 -*- # @Date : 2019-04-23 16:12 ...
随机推荐
- windows下mysql中文乱码, 配置解决方法
内容源自:windows下mysql中文乱码, 配置解决方法 解决方法:打开mysql安装目录,打开my.ini文件(如果只有my-default.ini文件,先将其改名为my.ini!!!) 修改内 ...
- SQL Server 2005/2008备份数据库时提示“无法打开备份设备”
错误描述: 今天备份sqlserver 2008数据库时候,想要将备份文件放在f盘的根目录下,结果提示如下信息:备份对于服务器“服务器名”失败.(Microsoft.SqlServer.Smo)其他信 ...
- WebService 之 工作原理
一.Web Service基本概念 Web Service 也叫 XML Web Service,WebService 是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求 ...
- Linux配置快捷方式路径
快就一个字,我只说一次! 1.命令顺序: a) 先输入 cd / b) gedit /etc/profile c) 最后添加路径,看到蓝色部分的没? 把/home更换 ...
- Unity Mono foreach BUG性能测试
# 环境 - Unity 4.6.4 / Windows # 测试代码 # 结果数据 # 结论 foreach存在bug,会导致GC,并且效率低下: 使用GetEnumerator代替,没有GC,并且 ...
- struts2 Action向JSP传值方式
1.通过属性getXXX()和setXXX()方式 Action类 public class Test { private String name; public String getName() { ...
- 【Shiro】Apache Shiro架构之权限认证(Authorization)
Shiro系列文章: [Shiro]Apache Shiro架构之身份认证(Authentication) [Shiro]Apache Shiro架构之集成web [Shiro]Apache Shir ...
- C#调用 oracle存储过程
C#调用oracle 存储过程与调用Sql server存储过程类似,比较简单:直接给出示例: /// <summary> /// 判断物料类型是不是总部管控 /// </summa ...
- python hello wlord
入门运行第一个python程序 https://www.python.org/ 官网下载最新python3安装到电脑 安装成功 cmd进入到安装目录 1.在cmd中直接进入到python安装目录 编写 ...
- 创建cocos2d-x+lua项目
1> 创建cocos2d-x+lua项目 进入到cocos2d-x-2.1.5\tools\project-creator文件夹运行下面命令: python create_project ...