antd Select 组件完全指南：选项下拉框的 API、搜索、多选与最佳实践

导读

Select 是 Ant Design（antd）数据录入（Data Entry）组件中面向"从一组候选项中选择一个或多个值"场景的核心选择器，它以自定义下拉菜单替代浏览器原生 <select>，并在此基础上扩展出搜索过滤、多选、标签（tags）输入、自动分词、虚拟滚动与完全可控的弹出层等能力。本文将以其官方文档为核心骨架，结合本仓库源码（如 组件入口 components/select/index.tsx）与 30+ 个 真实示例 components/select/demo 展开，帮助你完整掌握 Select 的 props 语义、showSearch 对象式配置、Option/OptGroup/options 三种数据定义方式、语义化 DOM 定制（classNames/styles）以及 FAQ 中常见的踩坑解法。

何时使用 Select（When To Use）

官方文档给出了三类清晰的选型边界：

• 需要一个"优雅的下拉选择菜单"，作为原生 <select> 元素的替代品时，使用 Select；
• 当可选项总数较少（少于 5 个）时，建议改用 Radio 单选按钮组，减少点击层级；
• 如果期望的是一个"既可输入文本、又可从建议中选取"的输入框，请使用 AutoComplete 而非 Select。

这条选型规则背后对应了 antd 内部对数据录入组件的分工：Select 强调"从已知集合中选择"，AutoComplete 强调"自由输入 + 联想补全"，而 Radio 强调"极少量选项的即时可见性"。

Select 的三种数据定义方式

在日常使用中，options、Select.Option、Select.OptGroup 承担着不同的声明职责，官方 API 同时保留三种写法，但明确指出对象数组 options 在性能上优于 JSX 逐项声明（官方原文：Will get better perf than jsx definition）。

1. options 对象数组（推荐）

import { Select } from 'antd';

const App: React.FC = () => (
  <Select
    defaultValue="lucy"
    style={{ width: 120 }}
    options={[
      { value: 'jack', label: 'Jack' },
      { value: 'lucy', label: 'Lucy' },
      { value: 'Yiminghe', label: 'yiminghe' },
      { value: 'disabled', label: 'Disabled', disabled: true },
    ]}
  />
);

该示例正是 components/select/demo/basic.tsx 的第一段核心写法：单选项数据类型为 { label, value }[]，并在第 4 项通过 disabled: true 演示了禁用单选项。可见 options 数组中每项可直接内联禁用态、并可扩展出自定义字段。

2. Select.Option 子组件（JSX 声明）

<Select defaultValue="lucy" style={{ width: 120 }}>
  <Select.Option value="jack">Jack</Select.Option>
  <Select.Option value="lucy">Lucy</Select.Option>
  <Select.Option value="disabled" disabled>Disabled</Select.Option>
</Select>

Option 的 props 表见 Option props 章节，核心字段为 value（string | number，默认参与过滤）、disabled（默认 false）、title（原生 title 属性）与 className。

3. Select.OptGroup 分组

<Select defaultValue="lucy" style={{ width: 200 }}>
  <Select.OptGroup label="Manager">
    <Select.Option value="jack">Jack</Select.Option>
    <Select.Option value="lucy">Lucy</Select.Option>
  </Select.OptGroup>
  <Select.OptGroup label="Engineer">
    <Select.Option value="Yiminghe">yiminghe</Select.Option>
  </Select.OptGroup>
</Select>

OptGroup 的关键 props 为 label（组标题，ReactNode）、key（组 key）、className 与 title。值得注意：Option/OptGroup 在类型注释中已被标注为 deprecated（建议改用 options），见 components/select/index.tsx 中 /** @deprecated Please use options instead. */ 的声明。

此外 options 还支持内嵌分组：当某一项的 label/value 结构中携带 options 子数组，且 fieldNames.options 指向对应字段时，即可生成分组。fieldNames 默认值为 { label: 'label', value: 'value', options: 'options', groupLabel: 'label' }（groupLabel 自 5.6.0 起新增，用于指定分组标题字段），适用于后端直接下发分组结构数据的场景。

单选、多选、Tags 与大小（Sizes）

mode：multiple 与 tags

const options = [];
for (let i = 10; i < 36; i++) {
  options.push({ label: i.toString(36) + i, value: i.toString(36) + i });
}

<Select
  mode="multiple"
  allowClear
  style={{ width: '100%' }}
  placeholder="Please select"
  defaultValue={['a10', 'c12']}
  onChange={(value) => console.log(`selected ${value}`)}
  options={options}
/>

这是 components/select/demo/multiple.tsx 的核心代码。mode 取 multiple（多选，仅能在给定候选中勾选）与 tags（标签，可自由输入新值并回车生成 tag）。二者的关键差异是 tags 模式允许用户提交不在 options 中的任意文本。

实现细节：在 components/select/index.tsx 中，mode 还保留了一个内部值 'SECRET_COMBOBOX_MODE_DO_NOT_USE' 被映射回 combobox（见第 254-266 行 useMemo），且 const isMultiple = mode === 'multiple' || mode === 'tags';（第 268 行）会决定 tagRender、maxCount 是否真正生效。源码同时会对 maxCount 但非多选模式的用法在开发环境抛出 usage 级警告：maxCount only works with mode multiple or tags。

size：三种规格

size 取 large、medium、small 三种取值，默认 medium。在 components/select/index.tsx 的第 382-399 行，组件会根据合并后的尺寸拼接 ${prefixCls}-lg / ${prefixCls}-sm 类名，尺寸实际由 config-provider 的 useSize hook 统一推导（组件级 > 紧凑上下文 > 全局 context）。

搜索：showSearch 从布尔值到配置对象

基础搜索

import { Select } from 'antd';

const App: React.FC = () => (
  <Select
    showSearch={{ optionFilterProp: 'label', onSearch }}
    placeholder="Select a person"
    onChange={onChange}
    options={[
      { value: 'jack', label: 'Jack' },
      { value: 'lucy', label: 'Lucy' },
      { value: 'tom', label: 'Tom' },
    ]}
  />
);

该示例取自 components/select/demo/search.tsx，是 v6 推荐的对象式 showSearch。showSearch 的类型为 boolean | Object：

Property	Description	Type	Default	Version
autoClearSearchValue	选中某项后是否清空当前搜索词。仅对 mode="multiple" 或 tags 生效	boolean	true
filterOption	为 true 时按输入过滤选项；为函数时以 (inputValue, option) 作为过滤判定，返回 true 表示保留	boolean | function(inputValue, option)	true
filterSort	搜索结果排序函数，遵循 Array.sort 的 compareFunction 约定	(optionA, optionB, info: { searchValue }) => number	-	searchValue 参数：5.19.0
optionFilterProp	过滤时使用 option 的哪个属性值。若使用 options 数组，应设为 label；传入 string[] 时按多个字段 OR 匹配	string | string[]	value	string[]：6.1.0
searchValue	当前输入框的搜索文本（受控）	string	-
onSearch	输入变化时的回调	function(value: string)	-
searchIcon	自定义搜索图标	ReactNode	<SearchOutlined />	6.4.0

默认值提示：当 showSearch 为布尔值时，filterOption 默认 true 且按 option 的 value 过滤；若想要按展示文本 label 过滤，就必须写 optionFilterProp="label"。上文 search.tsx 正是这一正确姿势的示例。

自定义过滤函数与多字段搜索

// 函数式过滤（filterOption）
<Select
  showSearch
  filterOption={(input, option) =>
    (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
  }
  options={[{ value: 'jack', label: 'Jack' }]}
/>

当过滤逻辑较复杂（如忽略大小写、前后缀匹配、正则）时，用函数返回布尔值替换默认规则。多字段搜索则可在 6.1.0 之后传数组：optionFilterProp={['label', 'value']}，任意字段命中即保留（OR 匹配），对应 components/select/demo/search-multi-field.tsx。

搜索排序（filterSort）

需要让搜索后列表按命中相关度排序时，可结合 searchValue（5.19.0+）：

<Select
  showSearch
  filterSort={(optionA, optionB, { searchValue }) => {
    // 以关键词开头者优先
    const aHit = optionA.label.startsWith(searchValue);
    const bHit = optionB.label.startsWith(searchValue);
    if (aHit !== bHit) return aHit ? -1 : 1;
    return optionA.label.localeCompare(optionB.label);
  }}
/>

对应示例见 components/select/demo/search-sort.tsx。

多选标签的高级控制

maxCount 限制最大选择数

<Select mode="multiple" maxCount={3} options={options} />

maxCount 自 5.13.0 引入，仅对 multiple/tags 生效（文档明确说明，源码中非多选时会被置为 undefined 并给出 usage 警告）。达到上限后其余选项自动禁用，示例见 components/select/demo/maxCount.tsx。

maxTagCount、maxTagPlaceholder、maxTagTextLength 与 responsive

• maxTagCount：number 时最多展示 N 个 tag；传 responsive 时依据容器宽度自动折叠（会牺牲渲染性能，官方提示 will cost render performance），示例见 components/select/demo/responsive.tsx；
• maxTagPlaceholder：折叠后占位内容，可为 ReactNode 或 function(omittedValues) 来展示被省略项的详情；
• maxTagTextLength：单个 tag 文案最多显示的字符数。

tagRender / labelRender / tokenSeparators

tagRender 与 labelRender 都接收 props: LabelInValueType，区别在于：tagRender 定制"多选模式下 tag 的完整外观（含关闭按钮）"；labelRender 定制"选中项在 selector 内容区显示出的 label"（5.15.0+），二者示例分别见 custom-tag-render.tsx 与 custom-label-render.tsx。

tokenSeparators 用于在粘贴/输入时按分隔符自动分词：类型为 string[] | ((input: string) => string[])（函数式写法自 6.5.0 起）。内置示例 automatic-tokenization.tsx 就是 mode="tags" + tokenSeparators={[',']}（以英文逗号分词），自定义分词逻辑可参考 custom-tokenization.tsx。

隐藏已选中的选项（hideSelected）

通过监听 onChange 维护已选集合，再用 filter 剔除重复项，可实现"已选项不再出现在下拉列表"的效果，示例见 components/select/demo/hide-selected.tsx。

Variant：边框样式的正确打开方式

variant 取代了 bordered，取值：

Variant	外观	版本
outlined	常规边框（默认）	5.13.0 起
filled	填充底色、无外边框	5.13.0
borderless	完全无边框	5.13.0
underlined	仅下划线	5.24.0

示例组合可参考 components/select/demo/variant.tsx，其用 variant="filled" / borderless / underlined 分别渲染单选框与多选框。

源码佐证：在 components/select/index.tsx 第 249 行 useVariants('select', customizeVariant, bordered) 会把历史属性 bordered 兼容映射到 variant；同时第 410-425 行对 bordered、dropdownRender、dropdownMatchSelectWidth、dropdownStyle、dropdownClassName、popupClassName、onDropdownVisibleChange 等废弃属性逐一发出 deprecated 警告并指向替代属性。

扩展 UI：前后缀、自定义图标与状态

prefix 与 suffixIcon

prefix（ReactNode，5.22.0+）在输入框内最左侧显示自定义前置内容；suffixIcon 默认是 <DownOutlined /> 下拉箭头。示例见 components/select/demo/suffix.tsx。注意官方对 suffixIcon 的特别说明：自定义图标不会响应点击打开下拉（因为被替换的图标可能承载其它交互），若希望图标不可阻挡点击，可为其施加 pointer-events: none。

图标体系一览

图标 prop	默认值	说明
suffixIcon	<DownOutlined />	下拉箭头
menuItemSelectedIcon	<CheckOutlined />	多选模式下菜单项选中态图标
removeIcon	<CloseOutlined />	移除已选项（tag）图标
clearIcon	-	清除图标，allowClear 为对象 { clearIcon?: ReactNode } 时自定义（5.8.0+）
loadingIcon	<LoadingOutlined spin />	加载态图标（6.4.0 起可自定义）
searchIcon	<SearchOutlined />	搜索图标（在 showSearch 对象中配置，6.4.0）

这些默认图标由 components/select/useIcons.tsx 统一装配；多选时是否显示箭头由 components/select/useShowArrow.ts 的 useShowArrow 判定——逻辑是 showArrow !== undefined ? showArrow : suffixIcon !== null，即把 suffixIcon 显式设为 null 即可隐藏箭头（官方推荐的 showArrow 替代方案）。所有图标 props（clearIcon 等）在 6.4.0 起还支持通过 ConfigProvider 的 useComponentConfig('select') 全局配置，对应 API 表中 Global Config 列。

status、loading、disabled、allowClear

• status: 'error' | 'warning'（4.19.0+），用于表单校验态；在 FormItem 中会与 Form 的 validateStatus 自动合并（源码中通过 getMergedStatus(contextStatus, customStatus) 合并，见 components/select/index.tsx 第 286 行）；
• loading: 加载中状态，显示 loadingIcon；
• disabled: 禁用整个组件（同时受 DisabledContext 影响，源码第 331-333 行做了组件级 > context 的合并）；
• allowClear: boolean | { clearIcon?: ReactNode }，true 时在已选值后显示清除按钮，对象形式可自定义图标。

状态类综合示例见 components/select/demo/status.tsx。

弹出层：宽度、位置、渲染容器与自定义内容

popupMatchSelectWidth（替代 dropdownMatchSelectWidth）

决定下拉面板宽度是否与选择框一致：默认 true，此时面板 min-width 与输入框相同；若传数值（如 popupMatchSelectWidth={200}）则按固定宽度渲染，小于选择框宽度的值将被忽略；设为 false 会同时禁用虚拟滚动。旧属性 dropdownMatchSelectWidth 已废弃。

placement 与 RTL

placement 决定弹出方位：bottomLeft（默认）、bottomRight、topLeft、topRight。从源码看（components/select/index.tsx 第 401-407 行），当 direction 为 RTL 且未显式指定时，默认值会被推断为 bottomRight。对应示例见 components/select/demo/placement.tsx。

getPopupContainer：修复下拉随页面滚动

如果下拉菜单随页面滚动、或需要把 Select 放入其它弹层中，请用：

getPopupContainer={(triggerNode) => triggerNode.parentElement}

把弹出节点固定到触发元素的父容器。官方在 API 后附注强调该用法适用于"下拉随页面滚动 / 需要在其它 popup 层中触发 Select"的场景。

popupRender / dropdownRender：自定义下拉内容

<Select
  popupRender={(originNode) => (
    <div>
      {originNode}
      <Divider style={{ margin: '8px 0' }} />
      <Space style={{ padding: '0 8px 4px' }}>
        <Button type="text" size="small">确认</Button>
      </Space>
    </div>
  )}
/>

popupRender（5.25.0+）接收原始菜单节点并返回增强后的自定义下拉内容；dropdownRender 为废弃别名。参考 components/select/demo/custom-dropdown-menu.tsx。源码中 usePopupRender(popupRender || dropdownRender)（components/select/usePopupRender.tsx）同时兼容二者。

virtual 虚拟滚动与大列表

virtual 默认 true，Select 使用虚拟滚动只渲染可视区行，从而支撑十万级数据。官方 Big Data 示例 components/select/demo/big-data.tsx 直接生成了 100,000 条 options 演示流畅滚动；listHeight（默认 256）控制弹层高度，virtual={false} 会关闭虚拟滚动（同时面板将失去与输入框同宽的最小宽度约束）。

受控 value、labelInValue 与回调

value 形态与 labelInValue

value/defaultValue 的类型为 string | string[] | number | number[] | LabeledValue | LabeledValue[]。其中 LabeledValue 结构为 { key?: string; value: RawValue; label: React.ReactNode }（定义见 components/select/index.tsx 第 53-57 行）。当开启 labelInValue 后，onChange 抛出的 value 由 string 变为 { value, label } 对象——适合需要把"所选文案"一起回传后端的场景。示例见 components/select/demo/label-in-value.tsx。

optionLabelProp

指定用 option 的哪个属性渲染为选择框内的选中内容（而非下拉行内容），默认 children。典型场景：展示 value 对应 label 或自定义字段。

主要回调

回调	触发时机	签名
onChange	选中或输入值变化	function(value, option: Option | Array<Option>)
onSelect	选中某一项	function(value, option: Option)
onDeselect	取消选中（仅 multiple/tags）	function(value)
onSearch	输入框内容变化	function(value: string)
onOpenChange	下拉打开/关闭（替代 onDropdownVisibleChange）	(open: boolean) => void
onClear	点击清除	function
onBlur / onFocus	失焦 / 聚焦	function
onInputKeyDown	按键	(event: KeyboardEvent) => void
onPopupScroll	弹层滚动	(event: UIEvent) => void
onActive	键盘或鼠标交互激活某项	function(value)

实例方法

通过 ref 可调用 focus() 与 blur()，见下表与官方 Select Methods：

Name	Description
blur()	移除焦点
focus()	获取焦点

组件通过 React.forwardRef 暴露 BaseSelectRef 类型（别名 RefSelectProps），类型定义在 components/select/index.tsx 中导出。

语义化 DOM：classNames 与 styles（6.0+）

classNames / styles 允许你按语义结构精准定制样式，两者均支持对象或函数两种形态，函数形态接收 { props } 便于按组件当前状态计算样式。结构键（SemanticDOM）分为两大层级，见 SelectSemanticType 定义 第 59-94 行：

<Select
  className="my-select"
  classNames={{
    root: 'custom-root',
    prefix: 'custom-prefix',
    suffix: 'custom-suffix',
    input: 'custom-input',
    placeholder: 'custom-placeholder',
    content: 'custom-content',
    item: 'custom-item',
    itemContent: 'custom-item-content',
    itemRemove: 'custom-item-remove',
    clear: 'custom-clear',
    popup: { root: 'custom-popup', list: 'custom-list', listItem: 'custom-list-item' },
  }}
  styles={{
    itemContent: { display: 'flex', alignItems: 'center' },
    popup: { root: { padding: 8 } },
  }}
/>

升级提示：旧 dropdownClassName、dropdownStyle、popupClassName 应分别迁移到 classNames.popup.root、styles.popup.root；源码在合并时会以语义结构优先，旧属性仅作兼容（见 components/select/index.tsx 第 364-380 行的 mergedPopupClassName 与 mergedPopupStyle 拼接逻辑）。语义 DOM 可视化演示见 components/select/demo/_semantic.tsx，完整 classNames/styles 组合示例见 components/select/demo/style-class.tsx（6.0.0+）。

Select props 全量速查表

下表完整覆盖官方 API 表格（已合并废弃项标注与版本信息）：

Property	Description	Type	Default	Version
allowClear	自定义清除图标	boolean | { clearIcon?: ReactNode }	false	对象形式：5.8.0
autoClearSearchValue	选中后是否清空搜索（仅 multiple/tags），请用 showSearch 对象配置	boolean	true	×
bordered	是否有边框，请用 variant 替代	boolean	true	-
classNames	各语义结构 className	Record<SemanticDOM, string> | 函数	-	5.25.0
defaultActiveFirstOption	是否默认高亮第一项	boolean	true	×
defaultOpen	下拉初始是否展开	boolean	-	×
defaultValue	初始选中项	string/number/(LabeledValue) 及其数组	-	×
disabled	是否禁用	boolean	false	×
dropdownClassName	弹层 className，用 classNames.popup.root	string	-	×
dropdownMatchSelectWidth	弹层是否等宽，用 popupMatchSelectWidth	boolean | number	true	×
popupClassName	弹层 className，用 classNames.popup.root	string	-	4.23.0
popupMatchSelectWidth	弹层与输入框等宽；小于输入框的值被忽略；false 禁用虚拟滚动	boolean | number	true	5.5.0
dropdownRender	自定义弹层，用 popupRender	(originNode) => ReactNode	-	×
popupRender	自定义弹层内容	(originNode: ReactElement) => ReactNode	-	5.25.0
dropdownStyle	弹层样式，用 styles.popup.root	CSSProperties	-	×
fieldNames	自定义字段名（含 groupLabel）	object	{ label, value, options, groupLabel }	4.17.0；groupLabel 5.6.0
filterOption	见 showSearch 对象配置	boolean | function(inputValue, option)	true	×
filterSort	搜索排序函数	(optionA, optionB, info) => number	-	searchValue：5.19.0
getPopupContainer	弹层挂载节点	function(triggerNode)	() => document.body	×
labelInValue	value 是否携带 label	boolean	false	×
listHeight	弹层高度	number	256	×
loading	加载态	boolean	false	×
loadingIcon	自定义加载图标	ReactNode	<LoadingOutlined spin />	6.4.0
maxCount	最多可选数（仅 multiple/tags）	number	-	5.13.0
maxTagCount	最多展示 tag 数，responsive 自适应	number | responsive	-	responsive：4.10
maxTagPlaceholder	折叠处占位	ReactNode | function(omittedValues)	-	×
maxTagTextLength	tag 最大文本长度	number	-	×
menuItemSelectedIcon	多选选中图标	ReactNode	<CheckOutlined />	6.4.0 支持全局
mode	multiple | tags	-	-	×
notFoundContent	无匹配时的内容	ReactNode	No data	×
open	受控弹层开关	boolean	-	×
optionFilterProp	已废弃，见 showSearch.optionFilterProp	-	-	×
optionLabelProp	选择框内渲染 option 的哪个 prop	string	children	×
options	选项数组（比 JSX 性能更优）	{ label, value }[]	-	×
optionRender	自定义下拉选项渲染	(option, info: { index }) => ReactNode	-	5.11.0
placeholder	占位符	ReactNode	-	×
placement	弹出方位	bottomLeft/bottomRight/topLeft/topRight	bottomLeft	×
prefix	前置内容	ReactNode	-	5.22.0
removeIcon	移除图标	ReactNode	<CloseOutlined />	6.4.0 支持全局
searchValue	当前搜索文本（受控）	string	-	×
showArrow	是否显示箭头，用 suffixIcon={null} 替代	boolean	true	×
showSearch	是否可搜索	boolean | Object（见上文 showSearch 表）	单选 false、多选 true	对象形式：6.0.0
size	large | medium | small	-	medium	×
status	校验状态	'error' | 'warning'	-	4.19.0
styles	各语义结构内联样式	Record<SemanticDOM, CSSProperties> | 函数	-	5.25.0
suffixIcon	自定义后缀图标	ReactNode	<DownOutlined />	6.4.0 支持全局
tagRender	自定义 tag 渲染（仅 multiple/tags）	(props) => ReactNode	-	×
labelRender	自定义选中 label 渲染	(props: LabelInValueType) => ReactNode	-	5.15.0
tokenSeparators	自动分词分隔符	string[] | ((input) => string[])	-	函数形式：6.5.0
value	当前选中值（视为不可变数组）	string/number/(LabeledValue) 及其数组	-	×
variant	边框样式	outlined | borderless | filled | underlined	outlined	5.13.0；underlined 5.24.0
virtual	是否启用虚拟滚动	boolean	true	4.1.0

表格中标记 × 的列表示该 props 与 ConfigProvider 的全局组件配置无直接对应；标有版本号（如 6.4.0）的列代表该 props 支持在 ConfigProvider 的 component config 中统一配置默认值。所有 props 的最精确语义仍以 组件入口的 TypeScript 定义 为准。

FAQ 高频问题与解决方案

Q1：为什么 tags 模式下搜索会出现两个相同选项？

官方给出的根因是：某个 option 的 label 与 value 不同，默认按 value 过滤时输入命中 label 会重复出现。解决方式为改用 optionFilterProp="label" 调整过滤逻辑。

Q2：点击 popupRender 里的元素时下拉自动关闭？

受控解决：用 open 属性自行管理开关。官方提供代码片段链接。

Q3：希望点击 popupRender 内部时下拉不关闭？

Select 在失焦时会关闭，阻断事件即可：

<Select
  popupRender={() => (
    <div
      onMouseDown={(e) => {
        e.preventDefault();
        e.stopPropagation();
      }}
    >
      Some Content
    </div>
  )}
/>

Q4：自定义 Option 导致滚动异常（虚拟滚动错位）？

虚拟滚动内部假设每项行高为 24px。当你自定义了更高/更矮的行时，需同时调整两个内部 props：

<Select listItemHeight={10} listHeight={250} />

官方明确提醒：listItemHeight 与 listHeight 属内部 props，仅在必要时调整。组件级默认值 listHeight = 256 定义在 components/select/index.tsx 第 181 行，而 listItemHeight 默认取自主题 token 的 controlHeight（第 241 行）。

Q5：无障碍（a11y）测试报告缺失 aria-* 属性？

Select 仅在交互时才创建无障碍辅助节点，请先打开下拉再重试。若提示缺 aria-label / aria-labelledby，按需给 Select 补充对应属性。另注意：默认虚拟滚动会创建一个 mock 元素模拟无障碍绑定；若读屏软件需要完整读取整个列表，可设 virtual={false} 关闭虚拟滚动，使无障碍选项绑定到真实元素上。

Q6：点击自定义 tagRender 里的关闭按钮却打开了下拉？

tagRender 返回的自定义元素（如关闭图标）的 MouseDown 事件会冒泡到选择框触发下拉。需要在该元素上阻止冒泡：

<Select
  tagRender={(props) => {
    const { closable, label, onClose } = props;
    return (
      <span className="border">
        {label}
        {closable ? (
          <span
            onMouseDown={(e) => e.stopPropagation()}
            onClick={onClose}
            className="cursor-pointer"
          >
            ❎
          </span>
        ) : null}
      </span>
    );
  }}
/>

设计 Token 与全局主题联动

Select 的视觉变量（组件色彩、尺寸、padding、圆角等）通过 <ComponentTokenTable component="Select"> 呈现在官方文档 Design Token 章节，全部 token 均由 样式实现 components/select/style/index.ts 基于 antd 主题系统（seed token + alias token）推导。你可以在 ConfigProvider 的 theme 配置 中覆盖这些 token 定制整体观感，且上文 API 表中标注 6.4.0 的图标类 props 亦可通过 ConfigProvider 的 component config 做全局默认值下发，实现"一次配置、全局生效"。

结语

从"原生 select 替代品"到可承载十万级数据的虚拟滚动选择器，antd Select 的能力边界覆盖了单选、多选、tags、搜索过滤、自动分词、语义化 DOM 定制与无障碍支持等几乎所有企业级选择需求。掌握三件事即可自如运用：一是选型（少于 5 项用 Radio、可自由输入用 AutoComplete）；二是数据形态（优先 options 数组、配合 fieldNames 与 labelInValue）；三是按版本演进使用新 API（variant、showSearch 对象、popupRender、classNames/styles 等替代被废弃的同名旧属性）。在此基础上，再结合源码 components/select/index.tsx 与官方 demo 目录 components/select/demo 逐个验证行为，即可在真实业务中写出稳定、可维护、高性能的 Select 代码。