MUI Autocomplete多选组件分组选项功能实现问题求助

核心问题分析 #

自定义组选项点击后未触发Autocomplete内置逻辑，导致onChange不触发、下拉未关闭、组未从选项过滤。需通过组件API同步状态，配合自定义过滤和状态控制解决。

解决方案代码示例 #

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

// 示例数据：用户和组
const allOptions = [
  { type: 'user', id: 1, name: '张三' },
  { type: 'user', id: 2, name: '李四' },
  { type: 'group', id: 101, name: '开发组', members: [{ type: 'user', id: 1, name: '张三' }, { type: 'user', id: 3, name: '王五' }] },
  { type: 'group', id: 102, name: '测试组', members: [{ type: 'user', id: 2, name: '李四' }, { type: 'user', id: 4, name: '赵六' }] },
];

const UserSelector = () => {
  const [selectedUsers, setSelectedUsers] = useState([]);
  const [selectedGroups, setSelectedGroups] = useState([]);
  const [open, setOpen] = useState(false);
  const autoCompleteRef = useRef(null);

  // 自定义选项匹配逻辑（保留你的实现）
  const isOptionEqualToValue = (option, value) => {
    if (option.type === 'user' && value.type === 'user') return option.id === value.id;
    if (option.type === 'group' && value.type === 'group') return option.id === value.id;
    return false;
  };

  // 处理组选择：添加成员、记录已选组、关闭下拉、触发组件onChange
  const handleGroupSelect = (group) => {
    // 合并组内成员并去重
    const newSelectedUsers = [...selectedUsers];
    group.members.forEach(member => {
      const exists = newSelectedUsers.some(user => isOptionEqualToValue(user, member));
      if (!exists) newSelectedUsers.push(member);
    });

    // 更新状态
    setSelectedUsers(newSelectedUsers);
    setSelectedGroups(prev => [...prev, group]);
    // 关闭下拉面板
    setOpen(false);
    // 调用组件内部方法同步值，触发onChange
    autoCompleteRef.current?.setValue(newSelectedUsers, true);
  };

  // 自定义选项过滤：排除已选组和已选用户
  const filterOptions = (options, params) => {
    // 先应用MUI默认过滤逻辑（匹配搜索关键词）
    const filteredBySearch = Autocomplete.defaultFilterOptions(options, params);
    // 再过滤掉已选的组和用户
    return filteredBySearch.filter(option => {
      if (option.type === 'group') {
        return !selectedGroups.some(g => g.id === option.id);
      }
      return !selectedUsers.some(u => isOptionEqualToValue(u, option));
    });
  };

  return (
    <Autocomplete
      ref={autoCompleteRef}
      multiple
      open={open}
      onOpen={() => setOpen(true)}
      onClose={() => setOpen(false)}
      options={allOptions}
      filterOptions={filterOptions}
      isOptionEqualToValue={isOptionEqualToValue}
      value={selectedUsers}
      onChange={(event, newValue) => {
        // 处理普通用户的选择/取消操作
        setSelectedUsers(newValue);
      }}
      renderOption={(props, option) => {
        if (option.type === 'group') {
          return (
            <li {...props} onClick={() => handleGroupSelect(option)}>
              <span>📦 {option.name}（组）</span>
            </li>
          );
        }
        return (
          <li {...props}>
            <span>👤 {option.name}（用户）</span>
          </li>
        );
      }}
      renderTags={(value, getTagProps) =>
        value.map((option, index) => (
          <Chip key={index} label={option.name} {...getTagProps({ index })} />
        ))
      }
      renderInput={(params) => (
        <TextField
          {...params}
          variant="outlined"
          label="选择用户/组"
          placeholder="输入搜索关键词"
        />
      )}
    />
  );
};

export default UserSelector;

关键修复点说明 #

• 触发onChange事件：通过autoCompleteRef.current?.setValue(newValue, true)调用组件内部方法，第二个参数true强制触发onChange，确保组件内部状态与本地状态同步。
• 过滤已选组：维护selectedGroups状态记录已点击的组，在filterOptions中排除这些组，实现需求(c)。
• 自动关闭下拉：通过控制open状态，在handleGroupSelect中设置setOpen(false)，和普通用户选择行为保持一致，实现需求(d)。
• 选项去重逻辑：复用isOptionEqualToValue判断用户是否已选中，避免重复添加组内成员。

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