javascript - 使用 useRef 更改输入值

Question

我使用 React 的 useRef 钩子(Hook)捕获了一个元素。
如果我使用 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

听起来您正在寻找的是 命令式句柄 钩。
来自 React 文档:

useImperativeHandle customizes the instance value that is exposed to parent components when using 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