javascript - 如何从 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>
</>
)

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

Answer 1

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>