jquery 使用useRef更改输入值

a1o7rhls  于 2023-08-04  发布在  jQuery
关注(0)|答案(3)|浏览(102)

我用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">

字符串
有没有一种方法可以使用这个.inputRef来更改该元素的值?然后强制重新渲染

bpsygsoo

bpsygsoo1#

听起来你要找的是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://react.dev/reference/react/useImperativeHandle

tcbh2hod

tcbh2hod2#

你可以这样做:

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

字符串
唯一的问题是引用不会更新或重新定义组件,所以,值永远不会更新...而不是它可能会抛出一个错误,您试图将不受控制的输入作为受控输入

55ooxyrt

55ooxyrt3#

也许这可以帮助

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

)

字符串

相关问题