在 React 中使用 Ref 设置输入值

在 React 中使用 ref 设置输入字段的值：

1. 在输入元素上设置 ref 属性。
2. 当某个事件被触发时，更新 ref 的值。
3. 例如，ref.current.value = 'New value'。

import {useRef} from 'react';

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

  function handleClick() {
    // ?️ 更新 input 值
    inputRef.current.value = 'New value';

    // ?️ 访问 input 值
    console.log(inputRef.current.value);
  }

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

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

export default App;

该示例使用不受控制的输入。请注意，输入字段没有设置 onChange 属性或值。

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

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

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

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

useRef 钩子创建一个普通的 JavaScript 对象，但在每次渲染时为您提供相同的 ref 对象。换句话说，它几乎是一个带有 .current 属性的记忆对象值。

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

每次用户单击示例中的按钮时，不受控制的输入的值都会更新。

如果我们需要清除输入字段的值，请将其值设置为空字符串，例如 inputRef.current.value = ''。

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

火焰兔

海报 链接