如何限制React多选复选框的选中数量

基于你提供的组件，我们可以通过修改核心逻辑实现选中数量限制功能，以下是修改后的完整代码：

const MultiselectCheckbox = ({ options, onChange, limitedSelectCount }) => {
  // 初始化时为每个选项添加默认选中状态（未选中）
  const [data, setData] = React.useState(
    options.map(item => ({ ...item, checked: item.checked || false }))
  );

  const toggle = index => {
    const currentItem = data[index];
    const checkedCount = data.filter(item => item.checked).length;

    // 若当前项未选中，检查是否已达到选中数量限制
    if (!currentItem.checked) {
      if (typeof limitedSelectCount === 'number' && checkedCount >= limitedSelectCount) {
        // 超过限制，不执行选中操作
        return;
      }
    }

    // 更新选中状态并触发回调
    const newData = [...data];
    newData.splice(index, 1, {
      ...currentItem,
      checked: !currentItem.checked
    });
    setData(newData);
    onChange(newData.filter(x => x.checked));
  };

  // 判断未选中项是否需要禁用（提升用户体验）
  const getIsDisabled = (item) => {
    if (typeof limitedSelectCount !== 'number') return false;
    const checkedCount = data.filter(i => i.checked).length;
    return !item.checked && checkedCount >= limitedSelectCount;
  };

  return (
    <>
      {data.map((item, index) => (
        <label key={item.label}>
          <input
            type="checkbox"
            checked={item.checked}
            onClick={() => toggle(index)}
            disabled={getIsDisabled(item)}
          />
          {item.label}
        </label>
      ))}
    </>
  );
};

// 示例1：限制最多选中1个
const options1 = [{ label: 'Item One' }, { label: 'Item Two' }, { label: 'Item Three' }];
ReactDOM.render(
  <MultiselectCheckbox
    options={options1}
    onChange={data => {
      console.log('选中项:', data);
    }}
    limitedSelectCount={1}
  />,
  document.getElementById('root1')
);

// 示例2：限制最多选中2个
const options2 = [{ label: '选项A' }, { label: '选项B' }, { label: '选项C' }, { label: '选项D' }];
ReactDOM.render(
  <MultiselectCheckbox
    options={options2}
    onChange={data => {
      console.log('选中项:', data);
    }}
    limitedSelectCount={2}
  />,
  document.getElementById('root2')
);

参数效果说明 #

• 当limitedSelectCount = 1时：
  • 选中任意一个复选框后，其余未选中项会被禁用（无法再选中）；取消已选中项后，可重新选择其他项
• 当limitedSelectCount = n（n为大于1的整数）时：
  • 最多允许选中n个复选框，达到数量后未选中项会被禁用；取消部分选中项后，可继续选择剩余未选中项

注：如果不需要禁用效果，可删除disabled={getIsDisabled(item)}及getIsDisabled函数，仅保留toggle内的限制逻辑即可。

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