useRef 与 document.getElementById 聚焦输入之间的区别

Question

我正在关注 React tutorial，目前有以下 React 代码：

import { useRef } from 'react';

const AddItem = ({ newItem, setNewItem, handleSubmit }) => {
    const inputRef = useRef();

    return (
        <form className="addForm" onSubmit={handleSubmit}>
            <input
                ref={inputRef}
                id="addItem"
                type="text"
                value={newItem}
                onChange={(e) => setNewItem(e.target.value)}
            />
            <button
                type="submit"
                onClick={() => inputRef.current.focus()}
                // onClick={() => document.getElementById('addItem').focus()} // What does this do differently?
            >
            </button>
        </form>
    );
};

export default AddItem;

我使用

useRef()

和

onClick={() => inputRef.current.focus()}

来确保单击按钮后文本输入获得焦点。

我可以通过使用

useRef

来完成同样的事情，而不需要

onClick={() => document.getElementById('addItem').focus()}

钩子。

使用

useRef

方法比使用

getElementById

方法有好处吗？

Answer 1

在 React 中，你通常不会直接访问 DOM，而是让 React 为你做这件事。使用 React refs 是一种方法。您不需要以这种方式分配 id 或使用其他查询选择器。

这个答案很详细：https://stackoverflow.com/a/69260293/13637489