主页 / coding / 问题 / 79376532
Accepted
David Klempfner
Asked: 2025-01-22 12:28:24 +0800 CST

useRef 和 document.getElementById 在聚焦输入方面的差异

  • 772

我正在学习 React教程并且目前有这个 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？

javascript

1 个回答

  1. Best Answer

    在 React 中，您通常不会直接访问 DOM，而是让 React 为您执行此操作。使用 React refs 是一种方法。您无需以这种方式分配 id 或使用其他查询选择器。

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

    很多信息可以直接在React 文档中找到：

    • 2

相关问题