如何处理Material UI的Autocomplete组件点击与变更事件，同步状态过滤表格

核心原因 #

你当前只监听了Autocomplete内部TextField的输入事件，点击下拉选项触发的是Autocomplete组件本身的onChange回调，不会触发TextField的事件，所以过滤状态没有更新，导致表格过滤逻辑不执行。

修复方案 #

• 给Autocomplete组件添加onChange回调，同步选中值到过滤状态
  参考代码如下：

  <Autocomplete
    // 保留你原有配置项：options、value、renderInput等
    onChange={(event, newValue) => {
      // newValue即为当前选中的下拉选项，根据你实际需要存的字段赋值
      // 单选场景下 newValue 为选中项/空，多选场景为数组，自由输入场景可能为字符串
      setFilterValue(newValue ? newValue.label : '');
    }}
    renderInput={(params) => (
      <TextField
        {...params}
        // 保留原有TextField的onChange用于处理手动输入场景
        onChange={(e) => setFilterValue(e.target.value)}
        label="搜索关键词"
      />
    )}
  />
  

• 对齐值类型
  如果你用的选项是对象结构，需要根据你表格过滤逻辑用到的字段（比如选项的name、id、label等），从onChange回调的第二个参数newValue中取对应值存入状态，避免类型不匹配导致过滤失效。如果开启了freeSolo属性支持自由输入，需要额外判断newValue的类型是字符串还是对象，做兼容处理。
• 校验过滤逻辑的依赖
  确保表格过滤逻辑正确依赖你存储的过滤状态：如果是用useEffect监听状态变化触发过滤，确认状态正确加入依赖数组；如果是用useMemo生成过滤后的表格数据，也需要把过滤状态加入依赖数组，保证状态更新后自动重新计算。

内容的提问来源于stack exchange，提问作者Gavin