如何实现React Material UI Autocomplete多值芯片的状态切换

核心思路 #

要实现带颜色切换的多值芯片，需要把选中项扩展为包含状态的对象，而非直接存储原始选项值，同时自定义芯片渲染逻辑来处理点击切换：

• 用数组存储包含value（原始选项）和color（当前颜色）的对象
• 覆盖renderTags属性自定义芯片，添加点击切换颜色的逻辑
• 直接从状态数组中获取所有芯片的当前颜色状态

完整代码示例 #

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

const ColorToggleAutocomplete = () => {
  // 模拟选项数据源
  const options = ['选项A', '选项B', '选项C', '选项D'];
  
  // 存储选中项及颜色状态：{ value: string, color: 'red' | 'blue' }
  const [selectedItems, setSelectedItems] = useState([]);

  // 切换指定芯片的颜色
  const toggleChipColor = (targetItem) => {
    setSelectedItems(prevItems => 
      prevItems.map(item => 
        item.value === targetItem.value 
          ? { ...item, color: item.color === 'red' ? 'blue' : 'red' }
          : item
      )
    );
  };

  // 自定义渲染带颜色切换的芯片
  const renderTags = (_, getTagProps) => {
    return selectedItems.map((item, index) => (
      <Chip
        key={index}
        label={item.value}
        // 用MUI主题色映射：error对应红色，primary对应蓝色
        color={item.color === 'red' ? 'error' : 'primary'}
        onClick={() => toggleChipColor(item)}
        {...getTagProps({ index })}
      />
    ));
  };

  // 处理Autocomplete的选中事件，将原始选项转为带状态的对象
  const handleSelect = (_, newValue) => {
    // 过滤已选中的项，避免重复添加
    const newEntries = newValue
      .filter(option => !selectedItems.some(item => item.value === option))
      .map(option => ({ value: option, color: 'red' }));
    
    setSelectedItems(prev => [...prev, ...newEntries]);
  };

  // 示例：获取所有芯片当前状态
  const getChipStates = () => {
    console.log('芯片状态列表:', selectedItems);
    // 这里可以将状态提交到后端或做其他处理
  };

  return (
    <div style={{ padding: 24 }}>
      <Autocomplete
        multiple
        options={options}
        renderTags={renderTags}
        renderInput={(params) => (
          <TextField {...params} label="选择选项" placeholder="输入或选择" />
        )}
        onChange={handleSelect}
        // 给Autocomplete传递原始值数组，确保选项匹配逻辑正常
        value={selectedItems.map(item => item.value)}
      />
      <button onClick={getChipStates} style={{ marginTop: 16, padding: '8px 16px' }}>
        查看芯片状态
      </button>
    </div>
  );
};

export default ColorToggleAutocomplete;

关键细节说明 #

1. 状态管理：selectedItems数组中的每个元素都包含原始选项值和当前颜色，确保每个芯片的状态独立维护。
2. 芯片自定义：通过renderTags替换默认芯片，添加onClick事件触发颜色切换，利用MUI的color属性快速匹配主题色，也可以用style属性自定义颜色：

   style={{ backgroundColor: item.color === 'red' ? '#f44336' : '#2196f3', color: '#fff' }}
   

3. 选中逻辑：在handleSelect中过滤已存在的选项，避免重复添加新的状态对象。
4. 状态获取：selectedItems直接包含所有芯片的当前颜色，随时可以读取、提交或做其他业务处理。

适配对象选项 #

如果你的选项是对象（比如{ id: 1, name: '选项A' }），只需调整匹配逻辑：

• 将item.value替换为item.option.id（或其他唯一标识）
• value属性改为selectedItems.map(item => item.option)
• 可通过getOptionLabel指定选项的显示字段，比如getOptionLabel={(option) => option.name}

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