1. 获取 DOM 元素的引用。
2. 访问类组件的实例。
下面是一个使用 React Refs 的简单示例：
import React, { useRef, useEffect } from 'react';
function MyComponent() {
// 创建一个 Ref 对象
const myInputRef = useRef(null);
// 在组件挂载后，将焦点设置到输入框
useEffect(() => {
myInputRef.current.focus();
}, []);
// 处理按钮点击事件
const handleButtonClick = () => {
// 获取输入框的值
alert(`Input value: ${myInputRef.current.value}`);
};
return (
<div>
{/* 使用 Ref 关联输入框 */}
<input type="text" ref={myInputRef} />
{/* 按钮点击事件 */}
<button onClick={handleButtonClick}>Get Input Value</button>
</div>
);
}
export default MyComponent;
在这个例子中，useRef 创建了一个 Ref 对象 myInputRef。通过将这个 Ref 对象与输入框关联，我们可以通过 myInputRef.current 访问到输入框的 DOM 元素。在 useEffect 中使用 focus 方法将焦点设置到输入框上。在按钮点击事件中，我们使用 myInputRef.current.value 获取输入框的值。
需要注意的是，Refs 在函数组件和类组件中的使用方式略有不同。在类组件中，Refs 可以直接通过 this.myInputRef 进行访问，而在函数组件中，需要使用 myInputRef.current。
转载请注明出处：http://www.zyzy.cn/article/detail/4852/React