reactjs - 如何清除受控输入？

Question

我被这件事难住了。

我有一个受控输入（我使用的是 Material-UI TextField 和自动完成）。

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

我该怎么做？

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>
  );
}

（代码沙箱）

我不想自己实现这个状态的原因是因为自动完成+文本字段非常复杂，我认为必须有一个更简单的解决方案。

例如，有没有办法可以模仿键盘事件来清除文本字段？

Answer 1

由于您没有明确设置的值，因此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>
  );
}

演示

如果您不想使用状态，可以使用 prop inputRefofTextField获取对输入的引用，然后手动清除它：

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>
  );
}

演示2