如何在 React 中重置来自 useRef 的输入字段？

Question

我有一个文本输入。如果我单击页面中的特定按钮，我想重置输入的值。这是我的代码：

 const inputRef = useRef()

const handleClick= () => {
 inputRef.current.value.reset();
 return "hello world"
}

return (
<>
<input type="text" ref={inputRef}/>
<button onClick={()=> handleClick}>delete all</button>
</>
)

它不起作用。如何解决这个问题？

原文由 DoneDeal0 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以通过将其值设置为空字符串来清除文本输入字段。你可以这样做 inputref.current.value = "" 如果你想使用不受控制的输入。

但是，如果您想使用受控输入，您可以创建一个状态变量来跟踪输入字段的值。例如，

 const SomeComponent = () => {
  const [text, setText] = useState('')

  return (
    <>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={() => setText('')}>delete all</button>
    </>
  );
};

这是一个同时实现的 codeandbox 。

原文由 subashMahapatra 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

reset 在 form 元素上可用。您可以用表单包装您的输入，并在其上触发 reset 。

 const {useRef} = React;
const App = () => {
  const formRef = useRef();

  const handleClick = () => {
    formRef.current.reset();
  };

  return (
    <form ref={formRef}>
      <input type="text" />
      <input type="password" />
      <input type="checkbox" />
      <textarea></textarea>
      <button onClick={handleClick} type="button">
        clear form
      </button>
    </form>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

<div id="root"></div>

原文由 felixmosh 发布，翻译遵循 CC BY-SA 4.0 许可协议