如何在AntD Select组件的选项中添加复选框及全选功能

你直接把Checkbox嵌套在Option里的写法失效，是因为AntD Select的Option内置独立的选中逻辑，和内嵌Checkbox的状态没有打通，且Checkbox点击事件会冒泡触发Option的默认行为，因此无法自动绑定状态。

实现步骤：

• Select使用multiple模式，手动维护选中值的状态数组
• 选项头部新增全选选项，单独处理全选/取消全选逻辑
• 每个普通选项内嵌的Checkbox状态直接和全局选中数组绑定，点击Checkbox时阻止事件冒泡，避免和Select默认选中逻辑冲突

完整可运行代码：

import React from "react";
import { Select, Checkbox } from 'antd';
const { Option } = Select;

// 生成原始选项列表
const OPTIONS = [];
for (let i = 10; i < 36; i++) {
  const value = i.toString(36) + i;
  OPTIONS.push({ label: value, value });
}
// 全选选项的特殊值，避免和普通选项重复
const SELECT_ALL_VALUE = 'SELECT_ALL';

export const Test = () => {
  const [selectedValues, setSelectedValues] = React.useState(['a10', 'c12']);
  const [size, setSize] = React.useState('default');

  const handleSizeChange = e => {
    setSize(e.target.value);
  };

  const handleSelectChange = (value) => {
    // 点击的是全选选项
    if (value.includes(SELECT_ALL_VALUE)) {
      // 之前已经是全选状态，点击后清空
      if (selectedValues.length === OPTIONS.length) {
        setSelectedValues([]);
      } else {
        // 否则选中所有选项
        setSelectedValues(OPTIONS.map(item => item.value));
      }
      return;
    }
    setSelectedValues(value);
  };

  // 计算全选框的选中状态
  const isAllSelected = selectedValues.length === OPTIONS.length;
  // 计算半选状态
  const isIndeterminate = selectedValues.length > 0 && selectedValues.length < OPTIONS.length;

  return (
    <Select
      mode="multiple"
      size={size}
      placeholder="Please select"
      value={selectedValues}
      onChange={handleSelectChange}
      style={{ width: '100%' }}
      optionRender={(option) => {
        // 渲染全选选项
        if (option.value === SELECT_ALL_VALUE) {
          return (
            <Checkbox checked={isAllSelected} indeterminate={isIndeterminate} onClick={(e) => e.stopPropagation()}>
              全选
            </Checkbox>
          )
        }
        // 渲染普通选项
        return (
          <Checkbox checked={selectedValues.includes(option.value)} onClick={(e) => e.stopPropagation()}>
            {option.label}
          </Checkbox>
        )
      }}
    >
      {/* 先加全选选项 */}
      <Option key={SELECT_ALL_VALUE} value={SELECT_ALL_VALUE} />
      {/* 渲染普通选项 */}
      {OPTIONS.map(item => (
        <Option key={item.value} value={item.value} label={item.label} />
      ))}
    </Select>
  );
};

如果需要保留原来的tags模式的输入新增标签能力，只需要把mode改回tags，再自行处理新增标签的逻辑插入OPTIONS数组即可。

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