如何在React中结合MaterialUI Autocomplete组件与状态构建过滤器并处理删除逻辑

核心思路 #

用受控组件方式管理Autocomplete的选中状态，通过自定义Chip的删除回调，直接更新state中的filter数组，实现UI和状态的同步。

完整代码示例 #

import { useState } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import Chip from '@mui/material/Chip';

function FilterAutocomplete() {
  // 存储选中的过滤选项
  const [filter, setFilter] = useState([]);
  // 下拉选项列表（可根据实际需求替换）
  const options = ['产品A', '产品B', '产品C', '产品D'];

  // 删除指定选项的处理函数
  const handleRemoveFilter = (targetOption) => {
    setFilter(prev => prev.filter(item => item !== targetOption));
  };

  return (
    <Autocomplete
      // 开启多选模式
      multiple
      // 绑定选项列表
      options={options}
      // 绑定受控状态：选中项数组
      value={filter}
      // 选中/取消选项时，直接更新state
      onChange={(e, newValue) => setFilter(newValue)}
      // 渲染输入框
      renderInput={(params) => (
        <TextField {...params} label="过滤器" placeholder="选择过滤项" />
      )}
      // 自定义生成的Chip组件，直接拿到当前选项
      renderChip={(chipProps, option) => (
        <Chip
          {...chipProps}
          // 绑定删除回调，传入当前要删除的选项
          onDelete={() => handleRemoveFilter(option)}
        />
      )}
    />
  );
}

export default FilterAutocomplete;

关键说明 #

1. 受控状态绑定：将value直接设置为state中的filter数组，Autocomplete的选中状态完全由state控制，避免手动操作DOM同步状态。
2. onChange简化：不再需要通过event.target.textContent获取值，onChange的第二个参数newValue就是当前完整的选中项数组，直接更新state即可。
3. 自定义Chip删除逻辑：通过renderChip回调，能直接获取到每个Chip对应的option，给onDelete绑定删除函数时，只需将该选项从filter数组中过滤掉，Autocomplete会自动更新UI。

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