如何在不使用状态的情况下清除功能组件中输入字段的值？

Question

我有一个输入字段，我通过 onKeyUp 处理输入（因为我需要访问event.which）。这很有效，因为我只是通过获取输入的内容，event.target.value但是当我尝试重置输入字段的值时遇到了问题。

我正在使用功能组件，因此无法通过 refs 访问输入，我使用 useRef 找到的所有示例仅展示了如何聚焦输入字段，而不是如何清除它。

我忘了提到我正在使用 Material-UI。

Answer 1

您可以通过ref.current.value强制设置为空字符串来使用功能组件内的 ref 清除输入的值：

const App = () => {
  const textInput = React.useRef();

  const clearInput = () => (textInput.current.value = "");

  return (
    <>
      <input type="text" ref={textInput} />
      <button onClick={clearInput}>Reset</button>
    </>
  );
}