使用 React useRef 钩子将输入字段集中在按钮单击上 - Javascript

React 的 useRef 钩子允许我们在函数组件中保存和访问 DOM 元素的引用。通过 useRef，我们可以将输入字段的焦点集中在按钮单击上。

在下面的示例中，我们将创建一个简单的 React 函数组件，它包含一个输入字段和一个按钮。我们将使用 useRef 钩子将输入字段的引用保存在一个变量中，然后在按钮的点击事件处理程序中设置输入字段的焦点。

import React, { useRef } from 'react';

function InputWithFocus() {
  const inputRef = useRef();

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

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

在上述代码中，我们调用 useRef 并将其赋给变量 inputRef。然后我们在输入字段的 ref 属性中传递 inputRef，这样 React 就会将该输入字段的引用存储在 inputRef.current 中。

当我们点击按钮时，handleClick 函数会被触发。在该函数中，我们通过 inputRef.current 引用了输入字段，并调用其 focus 方法来设置焦点。

现在，当我们在输入字段上点击按钮时，输入字段将获得焦点，允许我们输入内容。

这种用法非常有用，特别是在需要将焦点集中在特定元素上的情况下，例如表单验证或搜索功能。

请注意，useRef 返回的对象在组件的整个生命周期中保持不变，即使在重新渲染时也是如此。这就意味着我们可以在多个渲染周期之间共享相同的引用，而不会导致额外的渲染。

希望这个例子能帮助你理解如何使用 useRef 钩子将输入字段集中在按钮单击上！