Question

我对此感到困惑。

我有一个受控输入（我正在使用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>
  );
}

(Code Sandbox)

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

是否有一种方法可以模仿键盘事件来清除文本字段？

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

Demo

如果您不想使用状态，则可以使用inputRef的道具TextField获取对输入的引用，然后手动将其清除：

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

Demo2

如何清除受控输入？

1 个答案: