reset在form元素上可用。您可以将您的输入与表单 Package 在一起，并在表单上触发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>

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

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>

你可以通过设置一个空字符串来清除文本输入域，如果你想使用不受控制的输入，你可以像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。

有两个问题，一个是传递一个调用函数的函数到onClick处理程序--这是不需要的。如果在呈现之前定义函数，则不需要传递匿名函数到onClick处理程序。

// Before
<button onClick={()=> handleClick}>delete all</button>

// After
<button onClick={handleClick}>delete all</button>

另一个问题是handleClick函数调用reset，而reset不是一个输入函数，要重置引用的输入值，可以将其设置为空字符串（或者任何你想要的“默认”值）。

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

输入中的静止值

import { useRef } from 'react'

const Test = () => {
  const testRef = useRef(null)
  return (
    <div>
      <input type="text" ref={testRef} />
      <button onClick={() => inputSearch.current.value = ''}>×</button>
    </div>
  )
}

export default Test