使用 useRef 更改输入值

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

听起来您正在寻找的是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);

Answer 2

好吧，你可以这样做：

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

唯一的问题是 refs DO NOT update or reredender the component, so, the value will never update... 而不是它可能会在您尝试将不受控制的输入作为受控输入时抛出错误

Answer 3

也许这可以帮助

return(

    <input type="text" ref={inptRef}  />

    <button onClick={()=>inptRef.current.value = ""}>clear input</button>

)