在 React 中单击另一个元素时的焦点输入

在 React 中单击另一个元素时聚焦输入：

1. 在输入元素上设置 ref 属性。
2. 在另一个元素上设置 属性。
3. 单击其他元素时，聚焦输入，例如 。

import {useRef} from 'react';

const App = () => {
  const ref = useRef(null);

  const handleClick = () => {
    ref.current.focus();
  };

  return (
    <div>
      <input ref={ref} id="message" name="message" />

      <hr />

      <button onClick={handleClick}>Focus input</button>
    </div>
  );
};

export default App;

我们使用 钩子来创建一个 ref 对象，使我们能够访问输入元素。

钩子可以传递一个初始值作为参数。 该钩子返回一个可变的 ref 对象，其 属性被初始化为传递的参数。

，我们必须访问 ref 对象的当前属性才能访问我们设置 ref 属性的输入元素。

当我们将 ref prop 传递给元素时，例如 ，React将ref对象的 属性设置为对应的DOM节点。

我们在按钮元素上设置了 属性，因此每次单击按钮时，都会调用 函数。

，这不一定是按钮，我们可以在 div 或任何其他元素上设置 属性。

我们使用 方法来聚焦 函数中的输入字段。

ref 上的 属性使我们可以访问输入元素，因此调用 可以将焦点设置在输入上。

火焰兔

海报 链接