Ant Design 多选组件中实现并展示选择顺序的完整方案-js教程-PHP中文网

本文详解如何在 Ant Design 的 Select[mode="multiple"] 中动态显示用户的选择顺序（如“Label-1”、“Label-2”），并在标签（Tag）和下拉选项中同步更新序号，同时避免高频重渲染性能问题。

本文详解如何在 ant design 的 `select[mode="multiple"]` 中动态显示用户的选择顺序（如“label-1”、“label-2”），并在标签（tag）和下拉选项中同步更新序号，同时避免高频重渲染性能问题。

在 Ant Design 的多选组件中，默认仅维护选中值的集合（string[] 或 number[]），不保留选择顺序信息。但实际业务中常需向用户明确传达“谁先被选中”，例如配置优先级、定义执行序列等场景。此时，简单地将 label 静态写死为 "Label-1" 不可行——因为顺序会随增删动态变化，且下拉列表与已选标签需保持一致。

核心挑战在于：既要实时反映序号，又不能因每次 onChange 都重建整个 options 数组导致性能下降或闪烁。解决方案是结合 useRef 缓存原始选项、useState 管理带序号的渲染态选项，并通过 tagRender 自定义已选标签的显示逻辑。

✅ 推荐实现思路（高性能 + 可维护）

import { Select, Tag } from 'antd';
import type { SelectProps, CustomTagProps } from 'antd/es/select';

const { Option } = Select;

// 1. 原始静态选项（永不变更，用 useRef 避免闭包捕获旧值）
const initialOptions: SelectProps['options'] = [
  { label: 'Label', value: '1' },
  { label: 'Label', value: '2' },
  { label: 'Label', value: '3' },
  { label: 'Label', value: '4' },
];

export default function OrderedMultiSelect() {
  const selectedValues = useRef<string>([]);
  const optionsRef = useRef(initialOptions);

  // 2. 渲染态选项（含动态序号），受 selection 控制
  const [renderOptions, setRenderOptions] = useState<selectprops>(initialOptions);

  const handleChange = (values: string[]) => {
    selectedValues.current = values;
    // 仅对 options 进行映射更新：提取基础 label，追加当前序号（从 1 开始）
    setRenderOptions(prev =>
      prev.map(opt => {
        const index = values.indexOf(opt.value);
        // 移除旧序号（如 "_3"），防止叠加；支持任意 label 格式
        const baseLabel = opt.label.replace(/_\d+$/, '');
        return {
          ...opt,
          label: index === -1 ? baseLabel : `${baseLabel}-${index + 1}`,
        };
      })
    );
  };

  // 3. 自定义 tagRender —— 确保已选标签始终显示正确序号（即使 options 未重渲染）
  const tagRender = ({ value, label, closable, onClose }: CustomTagProps) => {
    const option = optionsRef.current.find(o => o.value === value);
    const index = selectedValues.current.indexOf(value);

    return (
      <tag onmousedown="{e"> {
          e.preventDefault();
          e.stopPropagation();
        }}
        closable={closable}
        onClose={onClose}
        style={{ marginRight: 6 }}
      >
        {`${option?.label.replace(/-\d+$/, '')}-${index + 1}`}
      </tag>
    );
  };

  return (
    <select mode="multiple" allowclear style="{{" width: placeholder="请选择（按选择顺序编号）" options="{renderOptions}" onchange="{handleChange}" tagrender="{tagRender}" label hover dropdownmatchselectwidth="{false}"></select>
  );
}</selectprops></string>

⚠️ 关键注意事项

不要直接修改 options 数组引用：每次 onChange 都应生成新数组（如 map 返回新项），否则 Ant Design 无法触发重新渲染。
序号清理逻辑要健壮：使用正则 /-\d+$/ 替换末尾序号，而非简单拼接，避免出现 "Label-1-2" 这类错误。
tagRender 必须独立计算序号：它不依赖 renderOptions，而是直接查 selectedValues.current，确保标签序号绝对准确（即使 renderOptions 更新有延迟）。
性能优化点：
- optionsRef 存储原始选项，避免 handleChange 闭包捕获过期 options；
- selectedValues 用 useRef 而非 useState，避免无意义的 re-render；
- renderOptions 仅在必要时更新（即 onChange 触发时），且 map 操作复杂度为 O(n)，n 为选项总数（通常较小）。