3.7k 次阅读  ·  读完需要 8 分钟

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元素的更多相关文章

  1. 办公软件Office PPT 2010视频教程从入门到精通系列教程(22课时)

    办公软件Office PPT 2010视频教程从入门到精通系列教程(22课时) 乔布斯的成功离不开美轮美奂的幻灯片效果,一个成功的商务人士.部门经理也少不了各种各样的PPT幻灯片.绿色资源网给你提供了 ...

  2. Provisioning Services 7.6 入门到精通系列之一:PVS前期规划

    1.  Provisioning Services 产品概述 Provisioning Services (简称PVS)采用了一种与传统映像解决方案截然不同的方法,从根本上改变了硬件与依托硬件而运行的 ...

  3. Jenkins pipeline 入门到精通系列文章

    Jenkins2 入门到精通系列文章. Jenkins2 下载与启动jenkins2 插件安装jenkins2 hellopipelinejenkins2 pipeline介绍jenkins2 jav ...

  4. NHibernate从入门到精通系列

    http://www.cnblogs.com/GoodHelper/archive/2011/02/17/1948744.html NHibernate从入门到精通系列(4)——持久对象的生命周期(上 ...

  5. Selenium 入门到精通系列:六

    Selenium 入门到精通系列 PS:Checkbox方法 例子 HTML: <html> <head> <title>测试页面</title> &l ...

  6. Selenium 入门到精通系列:五

    Selenium 入门到精通系列 PS:显式等待.隐式等待.强制等待方法 例子 #!/usr/bin/env python # -*- coding: utf-8 -*- # @Date : 2019 ...

  7. Selenium 入门到精通系列:四

    Selenium 入门到精通系列 PS:鼠标右键.鼠标悬停.键盘操作方法 例子 #!/usr/bin/env python # -*- coding: utf-8 -*- # @Date : 2019 ...

  8. Selenium 入门到精通系列:三

    Selenium 入门到精通系列 PS:Driver_Element 常用方法 例子 #!/usr/bin/env python # -*- coding: utf-8 -*- # @Date : 2 ...

  9. Selenium 入门到精通系列:二

    Selenium 入门到精通系列 PS:用户登录 例子 #!/usr/bin/env python # -*- coding: utf-8 -*- # @Date : 2019-04-23 16:12 ...

随机推荐

  1. windows下mysql中文乱码, 配置解决方法

    内容源自:windows下mysql中文乱码, 配置解决方法 解决方法:打开mysql安装目录,打开my.ini文件(如果只有my-default.ini文件,先将其改名为my.ini!!!) 修改内 ...

  2. SQL Server 2005/2008备份数据库时提示“无法打开备份设备”

    错误描述: 今天备份sqlserver 2008数据库时候,想要将备份文件放在f盘的根目录下,结果提示如下信息:备份对于服务器“服务器名”失败.(Microsoft.SqlServer.Smo)其他信 ...

  3. WebService 之 工作原理

    一.Web Service基本概念 Web Service 也叫 XML Web Service,WebService 是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求 ...

  4. Linux配置快捷方式路径

    快就一个字,我只说一次! 1.命令顺序: a)       先输入 cd / b)      gedit /etc/profile c)       最后添加路径,看到蓝色部分的没? 把/home更换 ...

  5. Unity Mono foreach BUG性能测试

    # 环境 - Unity 4.6.4 / Windows # 测试代码 # 结果数据 # 结论 foreach存在bug,会导致GC,并且效率低下: 使用GetEnumerator代替,没有GC,并且 ...

  6. struts2 Action向JSP传值方式

    1.通过属性getXXX()和setXXX()方式 Action类 public class Test { private String name; public String getName() { ...

  7. 【Shiro】Apache Shiro架构之权限认证(Authorization)

    Shiro系列文章: [Shiro]Apache Shiro架构之身份认证(Authentication) [Shiro]Apache Shiro架构之集成web [Shiro]Apache Shir ...

  8. C#调用 oracle存储过程

    C#调用oracle 存储过程与调用Sql server存储过程类似,比较简单:直接给出示例: /// <summary> /// 判断物料类型是不是总部管控 /// </summa ...

  9. python hello wlord

    入门运行第一个python程序 https://www.python.org/ 官网下载最新python3安装到电脑 安装成功 cmd进入到安装目录 1.在cmd中直接进入到python安装目录 编写 ...

  10. 创建cocos2d-x+lua项目

    1>     创建cocos2d-x+lua项目 进入到cocos2d-x-2.1.5\tools\project-creator文件夹运行下面命令: python create_project ...