如何在 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

您可以清除输入字段中的值，如下所示。

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

并onClick在按钮中更改呼叫，如下所示

onClick={handleClick}
//or
onClick={()=> handleClick()}

如果您想要完全重置具有多个输入的表单，您可以按照以下方法进行操作。在下面的示例中，表单将在提交后重置

const formRef = useRef();

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

render() {
  return (
    <form ref={formRef}>
      <input />
      <input />
      ...
      <input />
    </form>
  );
}

如果你不想使用 Ref

const handleSubmit = e => {
 e.preventDefault();
 e.target.reset();
}

<form onSubmit={handleSubmit}>
  ...
</form>

Answer 2

您可以通过将其值设置为空字符串来清除文本输入字段。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>
    </>
  );
};

这是一个包含两种实现的codesandbox。

Answer 3

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

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

  const handleClick = () => {
    formRef.current.reset();
    return 'hello world';
  };

  return (
    <form ref={formRef}>
      <input type="text" />
      <button onClick={handleClick} type="button">
        delete all
      </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>