React Refs 使用场景及核心要点
import React, { useRef, useEffect } from 'react';
// 一个自定义的输入框组件
const FocusInputComponent = () => {
const inputRef = useRef(null);
useEffect(() => {
// 当组件挂载后，输入框自动获取焦点
inputRef.current.focus();
}, []);
return (
<input ref={inputRef} type="text" placeholder="我会自动获取焦点" />
);
};
export default FocusInputComponent;这段代码展示了如何在React函数组件中使用useRef来创建一个ref并将其赋予到DOM元素，在这个例子中是一个输入框。useEffect钩子用于组件挂载后自动让输入框获取焦点。这是Refs在React中的一个常见用例，也展示了如何在函数组件中使用Effect Hook来执行副作用操作。
评论已关闭