AntD Select tags模式下如何区分手动输入值与选中已有Key？

我在使用AntD的Select组件并设置mode="tags"，代码如下：

<Select 
   mode="tags"
   style={{ width: '100%' }}
   placeholder="Tags Mode"
   onChange={onTagsChange}
   onSelect={onTagsSelect}
>
{taskTagList}
</Select>

const onTagsChange = (selectedOption) => {
// handle newValue
}

当前逻辑：用户选择下拉列表中的标签时，onChange传入该标签的id（即Key）；用户输入新标签时，传入输入的标签名称。但存在问题：当用户输入的内容恰好匹配某一已有选项的Key时，组件会自动选中对应的选项，忽略用户输入的内容。

现有选项键值对：

例如：用户从下拉列表选择“C”时，onTagsChange接收的selectedOption为3；但用户手动输入3时，组件自动显示“C”，且onTagsChange参数仍是3，无法区分该参数是选中已有标签的Key还是用户手动输入的新值。

需求：当用户手动输入3时，组件显示3作为新标签，同时让onTagsChange能识别这是用户手动输入的新值而非选中的已有Key。

解决方案 #

可以通过以下步骤实现需求：

1. 自定义filterOption，仅匹配选项显示文本
   默认情况下AntD Select会同时匹配选项的key和value，我们修改filterOption，只让输入内容与选项的显示文本匹配，这样输入数字3时不会匹配到Key为3的选项（显示文本是C），从而触发新标签创建：

<Select 
   mode="tags"
   style={{ width: '100%' }}
   placeholder="Tags Mode"
   onChange={onTagsChange}
   onSelect={onTagsSelect}
   filterOption={(input, option) => option.children.includes(input)}
>
{taskTagList}
</Select>

2. 在onChange中通过类型区分来源
   经过第一步处理后，选中已有选项时onChange传入的是数字类型的Key（如3），手动输入的新标签会传入字符串类型的输入值（如"3"），可通过类型判断区分：

const onTagsChange = (selectedOptions) => {
  selectedOptions.forEach(item => {
    if (typeof item === 'number') {
      // 来自选中已有选项
      console.log('选中已有标签，Key:', item);
    } else if (typeof item === 'string') {
      // 来自手动输入的新标签
      console.log('手动输入新标签，内容:', item);
    }
  });
};

确保taskTagList中的Option组件value为数字类型：

const taskTagList = [
  <Option key="1" value={1}>A</Option>,
  <Option key="2" value={2}>B</Option>,
  <Option key="3" value={3}>C</Option>,
];

3. 可选：自定义tagRender确保显示内容准确
   如果需要更精准控制标签显示，可通过tagRender自定义标签内容，完全按用户输入或选项文本展示：

const tagRender = (props) => {
  const { label, value, closable, onClose } = props;
  const isExistingTag = typeof value === 'number';
  return (
    <span className="ant-tag ant-tag-blue" style={{ marginRight: 8 }}>
      {isExistingTag ? label : value}
      {closable && <a onClick={onClose}>×</a>}
    </span>
  );
};

// 添加到Select组件
<Select 
  // 其他属性
  tagRender={tagRender}
>
{taskTagList}
</Select>

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