React中如何限制每组复选框的最大选择数量？

核心需求 #

• 每组插件需依据max_select属性限制可选择的插件数量
• 用户尝试选择超过最大值时，触发错误提示
• 当选中数量达到max_select后，禁用该组内剩余未选中的复选框

现有代码问题分析 #

1. 全局选中状态冲突：checkedState为单一数组，无法区分不同插件组的选中状态，多组场景下逻辑会混乱
2. 硬编码限制值：复选框disabled条件固定为selectedCount >=1，未使用每组的max_select动态值
3. 缺失错误反馈：没有处理用户选择超过限制时的提示逻辑

代码修改方案 #

1. 按组维护选中状态 #

将全局的checkedState改为对象结构，用组的唯一标识作为key，存储对应组的选中状态数组：

// 替换原单一checkedState为按组存储的对象
const [checkedStates, setCheckedStates] = useState({});

2. 初始化组选中状态 #

在handlePlusClick中，针对当前打开的插件组初始化选中状态：

const handlePlusClick = (arr) => {
  if (!arr || !arr.groups || !arr.groups.length || !arr.groups[0].addon) {
    return;
  }
  const targetGroup = arr.groups[0];
  // 生成组的唯一标识，确保多组间不冲突
  const groupKey = `group_${targetGroup.addon_group_type}_${targetGroup.id}`;
  // 根据组内插件数量初始化选中状态（默认全未选中）
  const initialCheckedState = new Array(targetGroup.addon.length).fill(false);
  
  setCheckedStates(prev => ({
    ...prev,
    [groupKey]: initialCheckedState
  }));
};

3. 更新复选框交互逻辑 #

修改复选框的onChange事件，加入数量校验和错误提示，同时动态控制禁用状态：

// 渲染复选框时，先获取当前组的关键信息
const groupKey = `group_${val?.addon_group_type}_${val?.id}`;
const groupMaxSelect = val?.max_select || 1; // 兼容未设置max_select的情况
const currentGroupChecked = checkedStates[groupKey] || [];
const currentSelectedCount = currentGroupChecked.filter(Boolean).length;

<input
  type="checkbox"
  className="check2 checkbox1"
  value={val}
  onChange={(e) => {
    const isChecked = e.target.checked;
    const updatedChecked = [...currentGroupChecked];
    updatedChecked[idx] = isChecked;
    
    // 计算更新后的选中数量
    const newSelectedCount = updatedChecked.filter(Boolean).length;
    
    // 校验是否超过max_select限制
    if (isChecked && newSelectedCount > groupMaxSelect) {
      // 显示错误提示（可替换为自定义弹窗/组件）
      alert(`该组最多选择${groupMaxSelect}个插件`);
      return; // 不执行后续状态更新
    }
    
    // 调用原有插件选择处理函数
    handleSelectAddon(
      isChecked,
      item?.addon_id,
      idx,
      addons?.groups,
      val?.id,
      val?.addon_group_type,
      groupMaxSelect
    );
    
    // 更新当前组的选中状态
    setCheckedStates(prev => ({
      ...prev,
      [groupKey]: updatedChecked
    }));
  }}
  checked={currentGroupChecked[idx] || false}
  // 动态禁用未选中的复选框：未选中 + 当前选中数已达上限
  disabled={!currentGroupChecked[idx] && currentSelectedCount >= groupMaxSelect}
/>

4. 优化错误提示（可选） #

如果需要更友好的错误提示，可使用状态管理替代alert：

// 新增错误提示状态
const [groupError, setGroupError] = useState('');

// 在超过限制时更新状态
setGroupError(`该组最多选择${groupMaxSelect}个插件`);
// 3秒后自动清除提示
setTimeout(() => setGroupError(''), 3000);

// 在页面合适位置渲染错误信息
{groupError && <div className="error-text">{groupError}</div>}

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