React Bootstrap ToggleButtonGroup 如何实现多选功能？

嘿，这个问题我熟！要让ToggleButtonGroup支持多选，其实只需要调整几个关键属性就行，我给你一步步说清楚：

核心配置要点 #

ToggleButtonGroup默认是单选模式（exclusive属性默认值为true），所以要开启多选，咱们得做这几件事：

• 把exclusive设为false，关闭单选限制
• 用状态来存储多个选中的选项（比如React的useState）
• 给组件绑定value和onChange来同步选中状态

完整代码示例 #

import { useState } from 'react';
import { ToggleButtonGroup, ToggleButton } from '@mui/material';

export default function MultiCategorySelector() {
  // 假设你的分类数据是这样的
  const categories = [
    { id: 1, name: '前端开发' },
    { id: 2, name: '后端开发' },
    { id: 3, name: '移动端开发' },
    { id: 4, name: 'UI设计' }
  ];

  // 用状态存储选中的分类ID数组
  const [selectedIds, setSelectedIds] = useState([]);

  // 处理选中状态变化
  const handleToggleChange = (event, newSelectedIds) => {
    setSelectedIds(newSelectedIds);
  };

  return (
    <ToggleButtonGroup
      name="test"
      value={selectedIds}
      onChange={handleToggleChange}
      exclusive={false} // 重点！开启多选模式
    >
      {categories.map(category => (
        <ToggleButton 
          key={category.id} 
          value={category.id} // 给每个按钮设置唯一值，建议用ID而非名称
        >
          {category.name}
        </ToggleButton>
      ))}
    </ToggleButtonGroup>
  );
}

关键细节解释 #

• exclusive={false}：这是开启多选的核心开关，去掉这个默认的单选限制，组件就允许同时选中多个按钮了。
• value={selectedIds}：绑定状态数组，让组件明确知道当前哪些选项是选中的。
• onChange回调：当用户点击按钮时，组件会自动计算出新的选中数组（newSelectedIds），我们只需要把它同步到状态里就行，不用自己手动处理添加/移除逻辑。
• 每个ToggleButton的value：一定要设置这个属性，而且建议用唯一标识（比如分类ID），避免因为分类名称重复导致选中状态混乱。

这样配置之后，你就能实现多选功能，点击不同的选项时，之前选中的不会被取消，而是保留下来啦！

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