前言
用于创建对DOM元素的引用。它还可以用于存储组件之间共享的变量,这些变量不会在组件重新渲染时发生更改。
用法
useRef() 可以接收一个初始值,返回一个包含 current
属性的对象,这个属性可以存储任意可变值,而且当修改它时不会重新渲染组件。
useRef() 的常见用法包括:
- 访问 DOM 节点的引用
- 保存定时器 ID 和其他一些无法通过 props 传递的变量
- 在组件的多次渲染之间存储值,而不需要使用useState() 来跟踪值的变化
下面是一个使用 useRef() 的示例代码:
import React, {
useRef } from 'react';
function InputWithFocusButton() {
const inputRef = useRef(null);
function handleButtonClick() {
inputRef.current.focus();
}
return (
<div>
<input type="text" ref={
inputRef} />
<button onClick={
handleButtonClick}>Focus Input</button>
</div>
);
}
在这个例子中,我们创建了一个名为inputRef
的引用,并将其传递给了 input
元素的 ref
属性。然后我们编写了一个函数 handleButtonClick(),当按钮被点击时,它将使用 current
属性来访问 input 元素的引用并聚焦该元素。