在 React 中使用 Ref 获取输入字段的值

在 React 中使用 ref 获取输入字段的值:

  1. 在输入元素上设置 ref 属性。
  2. 访问 ref 对象上输入字段的值,例如 ref.current.value。
import {useRef} from 'react';

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

  function handleClick() {
    console.log('value 👉️', inputRef.current.value);
  }

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

      <button onClick={handleClick}>Log message</button>
    </div>
  );
};

export default App;

在 React 中使用 Ref 获取输入字段的值

该示例显示了如何获取不受控制的输入字段的值。

当使用不受控制的输入字段时,我们使用 ref 访问输入。

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

当我们将 ref prop 传递给元素时,例如 <input ref={myRef} />,React将ref对象的 .current 属性设置为对应的DOM节点。

需要注意的是,当你更改 ref 的当前属性的值时,不会导致重新渲染。

每次用户单击示例中的按钮时,不受控制的输入值都会被记录下来。

我们不应该在不受控制的输入(没有 onChange 处理程序的输入字段)上设置 value prop,因为这会使输入字段不可变并且您将无法输入。