Question

我用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更改该元素的值？然后强制其重新渲染？

Answer 1

好吧，你可以这样做：

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

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

Answer 2

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

从React docs：

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

使用useRef更改输入值

2 个答案: