原文:Fullstack React's Guide to using Refs in React Components
作者:Yomi Eluwande
译者:博轩

译文:https://segmentfault.com/a/1190000019277029

使用 React 时,我们的默认思维方式应该是 不会强制修改 DOM ,而是通过传入 props 重新渲染组件。但是,有些情况却无法避免修改 DOM 。

React 中的 Refs 提供了一种访问 render() 方法中创建的 React 元素(或 DOM 节点)的方法。

当父组件需要与子组件交互时,我们通常使用 props 来传递相关信息。 但是,在某些情况下,我们可能需要修改子项,而不用新的props 重新呈现 (re-rendering) 它。 这时候就需要 refs 出场了。

我什么时候应该使用 Refs ?

我们建议在以下情况下使用 refs

  • 与第三方 DOM 库集成
  • 触发命令式动画
  • 管理焦点,文本选择或媒体播放

译注:第三点是否也可以理解为使用 event 对象呢?在 React 中就是合成事件(SyntheticEvent)。
官方文档中提到:避免使用 refs 来做任何可以通过声明式实现来完成的事情。

所以一旦我们确定我们真的应该使用 refs,我们需要如何使用它们呢?

在 React 中使用 Refs

您可以通过多种方式使用 refs :

  • React.createRef()
  • 回调引用 (Callback refs)
  • String refs(已过时)
  • 转发 refs (Forwarding refs)

接下来,让我们看看每一种实现方式:

React.createRef()

可以使用该 React.createRef() 函数创建 Refs ,并通过该 ref 属性附加到 React 组件中的 HTML 元素。

通常在组件的构造函数内创建 ref ,使其在整个组件中可用。例如:

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.firstRef = React.createRef();
}
render() {
return <div ref={this.firstRef} />;
}}

如上所示:

  • 一个 ref 实例在构造函数中创建,并赋值给 this.firstRef

  • 在 render() 方法内部,将构造函数中创建的 ref 传递给 div

接下来,让我们看一个在 React 组件中使用 refs 的示例。

使用 Refs 聚焦输入

这是另一个例子:

class CustomTextInput extends React.Component {
constructor(props) {
super(props);
// create a ref to store the textInput DOM element
this.textInput = React.createRef();
this.focusTextInput = this.focusTextInput.bind(this);
} focusTextInput() {
// Explicitly focus the text input using the raw DOM API
// Note: we're accessing "current" to get the DOM node
this.textInput.current.focus();
} render() {
// tell React that we want to associate the <input> ref
// with the `textInput` that we created in the constructor
return (
<div>
<input type="text" ref={this.textInput}/> <input
type="button"
value="Focus the text input"
onClick={this.focusTextInput}
/>
</div>
);
}
}

在上面的代码块中,我们构建了一个按钮,当单击它时,该页面会自动聚焦在输入框上。

首先,我们在构造方法中创建一个 ref 实例,并将其赋值给 this.textInput,然后通过 ref 属性将其分配给 input 元素。

<input type="text" ref={this.textInput} />

注意,当 ref 属性被一个 HTML 元素使用时(比如当前示例中的 input 元素),在 constructor 中使用 React.createRef() 创建的 ref 会接收来自底层 DOM 元素的 current 值。

译注:这里的 current 应该是 合成事件(SyntheticEvent)

这意味着访问 DOM 值,我们需要写这样的东西:

this.textInput.current;

第二个元素是一个按钮,点击它之后会自动聚焦到第一个输入框上面。我们为 onClick 属性设置了 this.focusTextInput 函数。

<input
type="button"
value="Focus the text input"
onClick={this.focusTextInput}/>;

函数 focusTextInput() 使用了 JavaScript 构建 DOM 的标准函数。 .focus() 方法会将光标聚焦于文本输入框上。

focusTextInput() {
this.textInput.current.focus();}

最后,focusTextInput 函数绑定在这样的 constructor 方法中的:

this.focusTextInput = this.focusTextInput.bind(this);

从 ref 中获取值

在这个例子中,我们将看到如何为 input 输入框设置 ref 属性,并通过 ref 来获取值。示例如下:

在这个例子中,我们创建了一个 input 输入框来输入值。然后,当单击提交按钮时,我们将读取此值,并在控制台打印。

class CustomTextInput extends React.Component {
constructor(props) {
super(props);
// create a ref to store the textInput DOM element
this.textInput = React.createRef();
} handleSubmit = e => {
e.preventDefault(); console.log(this.textInput.current.value);
}; render() {
// tell React that we want to associate the <input> ref
// with the `textInput` that we created in the constructor
return (
<div>
<form onSubmit={e => this.handleSubmit(e)}>
<input type="text" ref={this.textInput}/>
<button>Submit</button>
</form>
</div>
);
}
}

同样,我们使用该 React.createRef() 函数创建一个 ref 实例,然后将它分配给实例变量 this.textInput。

在 render 函数中,我们希望读取 form 下输入框的值。我们如何读取这个值? 通过为 input 指定一个 ref ,然后读取 ref 的值。

<input type="text" ref={this.textInput} />

点击提交按钮,上面示例中 form 元素会通过 onSubmit 方法,调用 this.handleSubmit 函数 ,并在控制台打印输入框中的信息。

handleSubmit = e => {
e.preventDefault();
console.log(this.textInput);};

上面,参数 e 包含事件对象。我们使用e.preventDefault() 来告诉浏览器我们正在处理被点击的提交按钮,我们不希望这个事件“冒泡”(意思就是说,阻止浏览器的默认行为)。
译注:这里可以看一下 React 对于事件的处理:在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault

在上面示例中,我们打印了 this.textInput ,在控制台可以看到一个 ref 对象。

> Object {current: HTMLInputElement}

请注意,它有一个 current属性,即 HTMLInputElement 。这是 input DOM 元素本身,而不是实际值。 我们必须使用 this.textInput.current.value 来获取 input 标签的实际值:

handleSubmit = e => {
e.preventDefault();
console.log(this.textInput.current.value);};

使用 refs 是一种从表单中直接提取值的方式:只需要给 input 标签设置 ref ,并在你需要的时候将值提取出来。

Refs 回调

Refs 回调 是在 React 中使用 ref 的另一种方式。要以这种方式使用 ref,我们需要为 ref 属性设置回调函数。当我们设置 ref 时,React 会调用这个函数,并将 element 作为第一个参数传递给它。

这是另一个例子的代码。像上面的示例一样,此代码获取 input 标签的文本值,但在这里我们使用回调引用:

class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.textInput = null; this.setTextInputRef = element => {
this.textInput = element;
};
} handleSubmit = e => {
e.preventDefault();
console.log(this.textInput.value);
}; render() {
return (
<div>
<form onSubmit={e => this.handleSubmit(e)}>
<input type="text" ref={this.setTextInputRef}/>
<button>Submit</button>
</form>
</div>
);
}
}

上面的示例中,我们将 input 标签的 ref 设置为 this.setTextInputRef。

当组件安装时,React 会将 DOM 元素传递给 ref 的回调;当组件卸载时,则会传递 null。(ref 回调会在 componentDidMount 和 componentDidUpdate 生命周期之前调用。)

String Ref(已过时)

还有另一种设置 refs 的方法,但它被认为是过时的,可能很快就会被弃用。但是你可能会在其他人的代码中看到它,所以这里说一下。

使用 string refs,你将会看到这样的 input 标签:

<input type="text" ref="textInput" />

然后,我们可以在组建上得到这样的值:this.refs.textInput.value - 但是,再次声明,这不应该在新代码中使用,因为这个 API 将被弃用。

转发 Refs (Forwarding Refs)

Ref forwarding 是一种将 ref 通过组件传递给其子节点的技术。它对于可复用组件库和高阶组件(HOC)等情况非常有用。

您可以使用 React.forwardRef 函数将 ref 转发到组件。我们来看下面的例子:

const TextInput = React.forwardRef((props, ref) => (
<input type="text" placeholder="Hello World" ref={ref}/>));
const inputRef = React.createRef(); class CustomTextInput extends React.Component {
handleSubmit = e => {
e.preventDefault();
console.log(inputRef.current.value);
}; render() {
return (
<div>
<form onSubmit={e => this.handleSubmit(e)}>
<TextInput ref={inputRef}/>
<button>Submit</button>
</form>
</div>
);
}
}

Ref forwarding 允许组件接收一个 ref ,并将它向下传递(换句话说,“转发”它)给子组件。

在上面的示例中,我们使用 input 标签创建了一个名为 TextInput 的组件。那么,我们如何将 ref 传递或转发到 input 标签呢?

首先,我们使用下面的代码创建一个 ref :

const inputRef = React.createRef();

然后,我们将 ref 通过为组件 <TextInput ref={inputRef}> 指定一个同名的 JSX 的属性,将 ref 向下传递。然后 React 将会把 ref 作为第二个参数转发给 forwardRef 函数。

接下来,我们将此 ref 参数转发给 <input ref={ref}>。现在可以在外层组件通过 inputRef.current 访问DOM节点的值了。

转发 refs 和高阶组件

最后,让我们看一下使用 refs 的另一个例子,但这次是使用高阶组件(HOC)。

在上面的示例应用程序中,会将所有 input 标签中输入的值在控制台打印。这里已经为 input 标签设置了 ref 属性,接下来,让我们看一下需要如何在高阶组件中传递 / 转发 ref 。

const Input = InputComponent => {
const forwardRef = (props, ref) => {
const onType = () => console.log(ref.current.value);
return <InputComponent forwardedRef={ref} onChange={onType} {...props} />;
};
return React.forwardRef(forwardRef);
};

这里有一个名为 Input 的高阶组件 ,它接受 InputComponent 作为参数。当用户输入的时候,他还会将 ref 的值在控制台打印。

在 Input 高阶组件内,forwardRef 函数会返回 InputComponent。forwardRef 函数中所包含的 ref 参数,是由 React.forwardRef 函数创建的。 高阶组件最终会将包装好的组件作为值返回。

接下来,我们创建一个组件,将 input 作为子组件包含进来。

const TextInput = ({ forwardedRef, children, ...rest }) => (
<div>
<input ref={forwardedRef} {...rest} />
{children}
</div>);

上面的组件会将 forwardedRef 分配给 ref 属性, 当渲染子组件的时候,input 输入框就会接收到这个 ref 。…rest 是 props 的解构(也就是说,我们会将 rest 数组中的所有参数作为 props 传递给 input 组件)。那么我们该如何使用 TextInput 组件呢?像这样:

const InputField = Input(TextInput);

class CustomTextInput extends Component {
render() {
const inputRef = React.createRef(); return <InputField ref={inputRef}/>;
}
}

最后,将 TextInput 传入 Input 高阶组件,会返回一个 InputField component。

创建一个 ref ,并作为参数传递给 InputField 组件。

结论

与通过 props 和 state 不同,Refs 是一种将数据传递给特定子实例的好方法。

你必须要小心,因为 refs 操纵实际的 DOM,而不是虚拟的 DOM,这与 React 思维方式相矛盾。因此,虽然 refs 不应该是通过应用程序流动数据的默认方法,但是当您需要时,它们是可以从 DOM 元素读取数据的好方法。

在 React 组件中使用 Refs 指南的更多相关文章

  1. 【React】282- 在 React 组件中使用 Refs 指南

    英文:Yomi Eluwande  译文:joking_zhang https://segmentfault.com/a/1190000019277029 使用 React 时,我们的默认思维方式应该 ...

  2. 规避 React 组件中的 bind(this)

    React 组件中处理 onClick 类似事件绑定的时候,是需要显式给处理器绑定上下文(context)的,这一度使代码变得冗余和难看. 请看如下的示例: class App extends Com ...

  3. react组件中的constructor和super小知识

    react组件中的constructor和super小知识 1.react中用class申明的类一些小知识 如上图:类Child是通过class关键字申明,并且继承于类React. A.Child的类 ...

  4. React组件中的key

    React组件中的key 一.key的作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key props),而是给reac ...

  5. React组件中对子组件children进行加强

    React组件中对子组件children进行加强 问题 如何对组件的children进行加强,如:添加属性.绑定事件,而不是使用<div>{this.props.children}< ...

  6. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  7. 在 React 组件中监听 android 手机物理返回/回退/back键事件

    当前端页面嵌入到 webview 中运行时,有时会需要监听手机的物理返回按键事件来做一些自定义的操作. 比如我最近遇到的,在一个页面里面有批量选择的功能,当点击手机的返回键时,清除页面上的选中状态.我 ...

  8. react组件中返回并列元素的方法

    我们在写react组件的时候,经常会遇到这种问题,在render中return元素只能有一个顶级元素,比如div,假如写成这样就会报错: render(){ return( <div>12 ...

  9. 优雅的在React组件中注册事件

    前言 在React的开发中,我们经常需要在 window 上注册一些事件, 比如按下 Esc 关闭弹窗, 按上下键选中列表内容等等.比较常见的操作是在组件 mount 的时候去 window 上监听一 ...

随机推荐

  1. Android版本之间的区别

    不同版本SDK适配要点 1,指定minSDKVersion与targetSDKVersion 2,运行时获取版本号 3,使用系统内置的主题,会随着版本的更换而自动适配 4,用android提供的注解 ...

  2. GsonForamt插件的使用

    第一步:在AS中安装GsonForamt插件 第二步:创建bean类 第三步: 在bean类体中做如下操作即可快速创建bean类 鼠标右击按图选择: 将需要解析的json字符串复制进去 设置界面:可以 ...

  3. 五十:数据库之Flask-Script详解

    使用flask-script可以实现自定义命令来操作flask,如:可以通过命令来跑一个开发版本的服务器.设置数据库.定时任务等安装:pip install flask-script 命令的添加方式1 ...

  4. C++ 中set

    set特点: 所有元素不会重复,重复插入已经有的新值无效: 所有元素按顺序排列:unordered_set除外 键和值相同,所以set中的值是不可更改的 set的各成员函数列表如下: 1.begin( ...

  5. 网络分析:WireShark

    安装 WireShark 官网 过滤器 类别 显示过滤器模式 捕获过滤器模式 逻辑表达式 and:&& or:|| 成组:() 过滤实例 仅监听某域名 http.host == &qu ...

  6. jQuery选择:子代元素与后代元素的区别

    (1)后代元素:html代码如下,那么在jquery选择时,$(".test img"),中间为空格,则是选取后代元素,img对于ul来说是孙子辈元素,中间隔了li元素,所以后代元 ...

  7. java:JQuery(Ajax,JSON)

    1.遍历ajax返回的json: 第一种: <%@ page language="java" import="java.util.*" pageEncod ...

  8. Java Applet基础——输出HelloWorld

    前言: 我自己不专用applet,仅仅是了解一下,如果有不对的地方,还望大家多多帮助~谢谢! 一. 准备环境 1. 安装Java的编译环境(另行百度哦~) 2. 下载 applet.jar ,放在项目 ...

  9. selenium+java+eclipse web项目自动化测试环境搭建

    一.java的安装与环境配置 1.下载JDK(Java Development Kit),下载地址 www.oracle.com 2.安装jdk(傻瓜式安装) 3.安装完成后,配置环境变量,步骤: ( ...

  10. numpy的divide函数

    和直接用/一样,都是矩阵的对应元素相除. 如果用*,那么是矩阵的对应元素相乘. 如果要实现矩阵乘法,用numpy的dot函数.