如果状态为空，如何清除 React Material AutoComplete 选中的标签？

Question

我有一个状态:

  const [searchEntryNo, setSearchEntryNo] = useState('');

然后我有一个函数可以像那样清除状态。

  const handleClear = () => {
    setSearchEntryNo('');
  };

然后 React AutoComplete :

           <Autocomplete
              className={classes.searchBox}
              id="combo-box-demo"
              size="small"
              options={entryList}
              getOptionLabel={(option) => option}
              onChange={(event, newValue) => {
                setSearchEntryNo(newValue);
              }}
              style={{ width: 300 }}
              renderInput={(params) => <TextField {...params} variant="outlined" 
                      placeholder="Searching" size="small" />}
            />

注：entryList为数组状态

有一个按钮，handleClear() 函数触发按钮点击：

<Button onClick={handleClear}> Clear </Button>

现在我想在触发 handleClear() 后从自动完成框中清除选定的标签。我该如何解决这个问题？ 请帮助我！！

Answer 1

onChange 还将第二个参数传递给更改处理程序：docs

onChange={(_, value: any, reason: string) => {
 if (value) {
    // seState
 }
if (reason === "clear") {
    // clear State
 }
}}

如果状态为空，如何清除 React Material AutoComplete 选中的标签？

How can clear React Material AutoComplete selected label clear if state empty?

javascript

reactjs

react-material