状态置空时如何清除React Material AutoComplete的已选中标签

当前Autocomplete组件为非受控运行状态：仅通过onChange回调将用户选中值同步到外部searchEntryNo状态，但没有将该状态反向绑定为组件的实际选中值。组件内部会独立维护选中项状态，外部手动将searchEntryNo置空的操作，不会触发组件内部状态更新，因此已选中的标签内容无法同步清除。

推荐方案：将Autocomplete改造为受控组件 #

这是MUI Autocomplete的标准使用方式，能从根本上解决内外状态不同步的问题：

1. 调整状态初始值，匹配Autocomplete的空值类型要求：Autocomplete未选中时的空值为null，原实现用空字符串''作为初始值容易出现类型不匹配问题

   // 将状态初始值从空字符串调整为null
   const [searchEntryNo, setSearchEntryNo] = useState(null);
   

2. 给Autocomplete组件新增value属性，直接绑定外部维护的状态，让组件的选中值完全由外部状态控制

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

3. 调整清空处理函数的置空值，因为组件的选中值现在完全跟随searchEntryNo变化，点击清空按钮将状态置为null时，组件会自动同步清除已选中的内容

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

备选兼容方案：非受控模式下手动触发组件清空 #

如果因为历史代码原因暂不适合改造为受控组件，可以通过ref获取组件实例，在点击清空按钮时主动触发组件的内部清空逻辑：

1. 引入useRef创建组件引用

   import { useRef } from 'react';
   const autocompleteRef = useRef(null);
   

2. 给Autocomplete组件绑定创建的ref，原有配置保持不变

   <Autocomplete
     ref={autocompleteRef}
     // ...其他原有配置完全保留
   />
   

3. 修改清空处理函数，同步触发组件内部的清空动作

   const handleClear = () => {
     setSearchEntryNo('');
     // 调用组件暴露的内部方法重置选中状态
     autocompleteRef.current?.clear();
   };
   

注意：备选方案仅适合临时兼容场景，长期开发维护仍推荐使用受控组件模式，状态逻辑更清晰，可避免后续出现更多内外状态不同步的边界问题。

内容的提问来源于stack exchange，提问作者Sakhawat Hossain Sohel