如何在Ant Design多选选择器中显示并处理选择顺序？

要实现按选择顺序动态更新标签且避免频繁更新options导致的性能问题，完全可以利用Ant Design Select的自定义标签渲染（tagRender）和选项自定义渲染能力，核心思路是维护一个记录选中顺序的状态数组，动态计算每个选项/标签的显示文本，而非修改原选项数组。

实现步骤 #

1. 维护选中顺序状态：用一个数组存储用户选中value的顺序，新增时追加、取消时移除，保留剩余项的顺序。
2. 自定义选中标签（tagRender）：根据当前value在选中顺序数组中的位置，动态生成带序号的标签文本。
3. 自定义下拉选项渲染：对已选中的选项显示带序号的文本，未选中的保持默认"Label"。
4. 高效更新选中顺序：在onChange事件中对比新旧选中集合，精准更新顺序数组，避免不必要的状态变更。

完整代码示例 #

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

const OrderableMultiSelect = () => {
  // 存储用户选中的value，严格保持选择顺序
  const [selectedOrder, setSelectedOrder] = useState([]);
  // 固定的基础选项集合，无需动态修改
  const baseOptions = [
    { value: 'opt1' },
    { value: 'opt2' },
    { value: 'opt3' },
    { value: 'opt4' },
    { value: 'opt5' },
  ];

  // 用useMemo缓存value到序号的映射，提升大量选项时的查找性能
  const valueToSeq = useMemo(() => {
    return selectedOrder.reduce((map, val, idx) => {
      map[val] = idx + 1;
      return map;
    }, {});
  }, [selectedOrder]);

  const handleSelectChange = (newSelectedValues) => {
    const currentSelectedSet = new Set(selectedOrder);
    const newSelectedSet = new Set(newSelectedValues);

    // 找出新增的选中项，追加到顺序数组末尾
    const addedItems = [...newSelectedSet].filter(val => !currentSelectedSet.has(val));
    // 过滤掉已取消的项，再拼接新增项，得到更新后的顺序数组
    const updatedOrder = selectedOrder.filter(val => newSelectedSet.has(val)).concat(addedItems);

    setSelectedOrder(updatedOrder);
  };

  // 自定义选中标签的渲染逻辑
  const customTagRender = (props) => {
    const { value, onClose, closable } = props;
    const seq = valueToSeq[value];
    const displayText = seq ? `Label-${seq}` : 'Label';

    return (
      <span className="ant-select-selection-item">
        {displayText}
        {closable && (
          <span 
            onClick={(e) => onClose(e)} 
            className="ant-select-selection-item-remove"
          >
            ×
          </span>
        )}
      </span>
    );
  };

  return (
    <Select
      mode="multiple"
      style={{ width: '100%' }}
      value={selectedOrder}
      onChange={handleSelectChange}
      tagRender={customTagRender}
    >
      {/* 渲染下拉选项：已选中的显示带序号文本，未选中的显示默认Label */}
      {baseOptions.map(opt => (
        <Select.Option key={opt.value} value={opt.value}>
          {valueToSeq[opt.value] ? `Label-${valueToSeq[opt.value]}` : 'Label'}
        </Select.Option>
      ))}
    </Select>
  );
};

export default OrderableMultiSelect;

方案优势 #

• 高性能：仅维护选中顺序状态，无需频繁修改/替换整个options数组，避免了大规模组件重渲染，尤其适合选项数量较多的场景。
• 精准匹配需求：完全实现选中项按顺序编号、取消后自动调整序号、未选中项恢复原标签的逻辑。
• 可扩展性强：如果后续需要修改标签格式（比如改成"第X个选项"），只需调整displayText的生成逻辑即可，无需改动核心状态管理。

内容的提问来源于stack exchange，提问作者Muhammad Umais Hassan