Reactjs 如何清除受控输入？

这件事难倒我了

我有一个受控输入（我使用的是Material UI TextField和Autocomplete）

我很高兴组件能够控制自己的值，但我希望能够清除输入

我该怎么做

function App() {
  const handleClick = useCallback(() => {
    //Do what?
  }, []);
  return (
    <div className="App">
      <TextField label="I'm a controlled input" />

      <button onClick={handleClick}> Click to clear</button>
    </div>
  );
}

函数应用程序（）{
const handleClick=useCallback（（）=>{
//做什么？
}, []);
返回(
单击以清除
);
}

我不想自己实现这种状态的原因是因为autocomplete+textfield非常复杂，我想一定有一个更简单的解决方案

---

例如，有没有一种方法可以模拟键盘事件来清除文本字段

由于没有明确设置

文本字段的值，因此它实际上不是受控输入

您可以将
TextField
的值设置为一种状态，然后在单击按钮时清除该状态：

function App() {
  const [text, setText] = useState("");
  const handleClick = useCallback(() => {
    setText("");
  }, []);
  return (
    <div className="App">
      <TextField label="I'm a controlled input" value={text} onChange={(e) => setText(e.target.value)} />

      <button onClick={handleClick}> Click to clear</button>
    </div>
  );
}

我已经对我面临的问题做了适当的重新描述，裁判的把戏没有做到：我不太确定你想在那里做什么，你能详细说明一下吗？
function App() {
  const ref = useRef();
  const handleClick = useCallback(() => {
    ref.current.value = "";
  }, []);
  return (
    <div className="App">
      <TextField label="I'm an uncontrolled input" inputRef={ref} />

      <button onClick={handleClick}> Click to clear</button>
    </div>
  );
}