ReactJS - Refs

ReactJS - Refs（引用）

引用（Refs）提供了一种访问在 render 方法中创建的 DOM 节点或 React 组件的方式。虽然对于可以使用声明式方法（即通过 props 和 state）完成的任务，通常应避免使用 refs，但它们对于管理焦点、文本选择、媒体播放、触发命令式动画或集成第三方 DOM 库非常有用。在函数组件中使用 refs 的主要方式是使用 useRef Hook。更多信息，请参阅 [链接到 React Docs 关于 Refs 和 DOM 的部分]。

使用 useRef 访问 DOM 元素

useRef Hook 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数 (initialValue)。返回的对象在组件的整个生命周期内将保持不变。你可以通过 JSX 中的 ref 属性将此 ref 附加到 DOM 元素上。这允许你直接与 DOM 元素进行交互。

App.jsx

import React, { useState, useRef } from 'react';

function App() {
    const [inputValue, setInputValue] = useState('');
    const inputRef = useRef(null); // 创建一个 ref

    const handleInputChange = (event) => {
        setInputValue(event.target.value);
    };

    const clearAndFocusInput = () => {
        setInputValue(''); // 通过 state 清空输入框的值
        // 使用 inputRef.current 访问 DOM 元素
        if (inputRef.current) {
            inputRef.current.focus(); // 聚焦输入字段
        }
    };

    return (
        <div>
            <input
                type="text"
                value={inputValue}
                onChange={handleInputChange}
                ref={inputRef} // 将 ref 附加到输入元素
            />
            <button onClick={clearAndFocusInput}>CLEAR AND FOCUS</button>
            <h4>Current Value: {inputValue}</h4>
        </div>
    );
}

export default App;

main.js (或 index.js)

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App />);

在此示例中，当点击 ‘CLEAR AND FOCUS’ 按钮时，会调用 clearAndFocusInput 函数。它首先更新状态 inputValue 为空字符串（因为输入框的 value 由此 state 控制，这会清空输入字段）。然后，它使用 inputRef.current.focus() 来程序化地设置焦点到输入元素。inputRef.current 直接指向底层的 DOM input 节点。

注意：字符串 refs 是旧版用法，应避免使用。ReactDOM.findDOMNode() 在大多数用例中也不被推荐，并且在 StrictMode 中已被废弃。结合 ref 属性在元素上使用 useRef Hook 是在函数组件中访问 DOM 节点的现代且推荐的方法。