React+Antd实现支持重复值的多选Select组件方案求助

使用Ant Design和React开发时，需要实现一个支持输入重复值的多选Select组件，允许用户输入如[20, 100, 100]这类包含重复值的选项集合。但AntD常规多选或tags模式下，输入已存在的值时会被移除，无法保留重复项。

基础代码如下：

const children = [];

function handleChange(value) {
  console.log(`selected ${value}`);
}

ReactDOM.render(
  <Select mode="tags" style={{ width: '100%' }} placeholder="Tags Mode" onChange={handleChange}>
    {children}
  </Select>,
  document.getElementById('container'),
);

已尝试三种方案但均失败：

• 为每个选中值设置唯一键，但无法修改已选中选项，也无对应API更新选项
• 尝试用Date.now()拼接生成唯一键，但不知如何在Select的props中正确实现，示例代码中selectedValue并非有效变量：

ReactDOM.render(
  <Select
    mode="tags"
    style={{ width: "100%" }}
    placeholder="Tags Mode"
    onChange={handleChange}
    value={Date.now() + '' + selectedValue}
  >
    {children}
  </Select>
);

• 添加labelInValue属性，但仅自动生成id和value字段，无法自定义id

可行实现方案 #

核心思路是用带唯一标识的对象存储每个选中项，绕过AntD默认的基于value的去重逻辑，自行维护选中数组，并通过labelInValue和自定义tagRender处理显示与交互逻辑。

完整代码示例 #

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

const DuplicateSelect = () => {
  // 维护选中项数组，每个项包含唯一key、实际值value、显示文本label
  const [selectedItems, setSelectedItems] = useState([]);

  // 处理标签输入/选择逻辑
  const handleChange = (newValue) => {
    if (!newValue) {
      setSelectedItems([]);
      return;
    }
    // 用户输入新标签时，包装成带唯一key的对象
    if (typeof newValue === 'string') {
      const newItem = {
        key: Date.now() + Math.random().toString(36).substr(2, 9),
        value: newValue,
        label: newValue,
      };
      setSelectedItems([...selectedItems, newItem]);
    } else {
      // 选择已有选项时，同样为新项生成唯一key
      const newItem = {
        key: Date.now() + Math.random().toString(36).substr(2, 9),
        value: newValue.value,
        label: newValue.label,
      };
      setSelectedItems([...selectedItems, newItem]);
    }
  };

  // 处理标签删除逻辑：通过唯一key定位删除项
  const handleTagRemove = (removedKey) => {
    setSelectedItems(selectedItems.filter(item => item.key !== removedKey));
  };

  // 自定义标签渲染，控制显示内容与删除事件
  const tagRender = (props) => {
    const { label, value, closable } = props;
    const onPreventMouseDown = (e) => {
      e.preventDefault();
      e.stopPropagation();
    };
    return (
      <span
        className="ant-select-selection-item"
        onMouseDown={onPreventMouseDown}
      >
        {label}
        {closable && (
          <span
            className="ant-select-selection-item-remove"
            onClick={(e) => {
              e.stopPropagation();
              handleTagRemove(value.key);
            }}
          />
        )}
      </span>
    );
  };

  return (
    <Select
      mode="tags"
      style={{ width: '100%' }}
      placeholder="支持重复值的多选输入"
      value={selectedItems}
      onChange={handleChange}
      tagRender={tagRender}
      labelInValue
    />
  );
};

ReactDOM.render(<DuplicateSelect />, document.getElementById('container'));

方案说明 #

1. 状态设计：用selectedItems数组存储选中项，每个项的唯一key用于区分重复值，避免AntD自动去重
2. 唯一标识生成：通过时间戳+随机字符串生成key，确保每个新项的唯一性
3. 自定义交互：通过tagRender自定义标签的显示样式与删除逻辑，删除时依据key而非value定位目标项
4. 事件兼容：区分用户输入新标签和选择已有选项的场景，统一将选中内容包装为带唯一key的对象

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