如何在antd的Select组件内嵌入Checkbox复选框替代默认选中图标

普通Select组件完全可以实现该需求，核心实现逻辑为关闭默认选中图标、自定义Option渲染内容、绑定选中状态与Checkbox的勾选状态即可。

实现步骤 #

• 配置Select基础属性：将menuItemSelectedIcon设为null，彻底隐藏默认的选中状态图标；多选场景下配置mode="multiple"开启多选能力。
• 自定义Option渲染：每个Option内部固定渲染Checkbox组件，将Checkbox的checked属性与当前选项是否在Select的选中值列表中做绑定。
• 复用Select原生选中逻辑：无需给Checkbox单独绑定点击事件，点击Option区域会自动触发Select的onChange事件更新选中值，Checkbox状态会跟随自动同步。

代码示例 #

import { useState } from 'react';
import { Select, Checkbox } from 'antd';

const { Option } = Select;

const CheckboxSelect = () => {
  const [selectedValue, setSelectedValue] = useState([]);
  const options = [
    { label: '选项1', value: '1' },
    { label: '选项2', value: '2' },
    { label: '选项3', value: '3' },
    { label: '选项4', value: '4' },
  ];

  return (
    <Select
      mode="multiple"
      value={selectedValue}
      onChange={setSelectedValue}
      menuItemSelectedIcon={null} // 隐藏默认选中图标
      style={{ width: 300 }}
      placeholder="请选择选项"
    >
      {options.map(item => (
        <Option key={item.value} value={item.value}>
          <Checkbox checked={selectedValue.includes(item.value)}>
            {item.label}
          </Checkbox>
        </Option>
      ))}
    </Select>
  );
};

export default CheckboxSelect;

可选优化 #

• 若不需要Option选中时的默认背景高亮，可通过CSS覆盖.ant-select-item-option-selected类的背景色样式。
• 单选场景下删除mode="multiple"配置，将selectedValue的默认值改为null，Checkbox的checked判断改为selectedValue === item.value即可。

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