使用 useRef 更改输入值

Posted 2023-02-22

【中文标题】使用 useRef 更改输入值

【英文标题】：Change input value with useRef

【发布时间】：2021-01-27 19:22:36

【问题描述】：

我使用 React 的 useRef 钩子捕获了一个元素。 如果我使用 console.log(this.inputRef) 我得到：

<input aria-invalid="false" autocomplete="off" class="MuiInputBase-input-409 MuiInput-input-394" placeholder="Type ItemCode or scan barcode" type="text" value="2">

有没有办法使用 this.inputRef 更改该元素的值？然后强制其重新渲染？

【问题讨论】：

我不熟悉 React，但假设 this.inputRef 顾名思义是对元素的引用，this.inputRef.value = 'foo' 应该可以工作

您使用 ref 而不是 state 有什么原因吗？如果您在状态中管理输入值（而不是保持对元素本身的引用），则该过程通常会变得更加清晰。相关React forms documentation

因为 onchange 函数是在输入组件内部声明的，而不是来自父组件。所以我想从父组件使用 ref 触发它

【参考方案1】：

好吧，你可以这样做：

<input ref=myRef value=myRef.current.value />

唯一的问题是 refs 不会更新或重新渲染组件，因此，该值永远不会更新......而不是它可能会在您尝试将不受控制的输入设为受控时抛出错误

【参考方案2】：

听起来您正在寻找的是 ImperativeHandle 钩子。

来自 React 文档：

useImperativeHandle 自定义使用 ref 时暴露给父组件的实例值

下面的代码应该适合你：

function ValueInput(props, ref) 
  const inputRef = useRef();
  useImperativeHandle(ref, () => (
    changeValue: (newValue) => 
      inputRef.current.value = newValue;
    
  ));
  return <input ref=inputRef aria-invalid="false" autocomplete="off" class="MuiInputBase-input-409 MuiInput-input-394" placeholder="Type ItemCode or scan barcode" type="text" value="2">

ValueInput = forwardRef(ValueInput);

文档：https://reactjs.org/docs/hooks-reference.html#useimperativehandle