Select组件tags模式下如何识别手动新增的标签？

方法一：对比初始选项与当前选中值 #

1. 把API返回的初始选项（比如[1,2,3,4]）存为固定集合或状态变量
2. 获取当前Select组件的选中值数组（比如[2,5]）
3. 筛选出不在初始选项里的元素，就是新增的标签：

   const initialOptions = [1,2,3,4];
   const selectedValues = [2,5];
   const newTags = selectedValues.filter(item => !initialOptions.includes(item));
   // newTags结果为[5]，就是新增的标签
   

方法二：利用组件事件回调区分 #

在tags模式下，选择已有预设选项和手动新增标签时，组件的回调参数有差异：

• 选择已有选项时，onSelect的第二个参数option是完整的选项对象
• 手动输入新增标签时，option为undefined

直接在回调里判断即可：

const handleSelect = (value, option) => {
  if (!option) {
    // 当前value就是新增的标签，比如这里的5
    console.log('新增标签：', value);
  } else {
    // 选择的是已有预设选项，比如2
    console.log('选择已有选项：', value);
  }
};

组件使用时绑定事件：

<Select 
  mode="tags" 
  onSelect={handleSelect} 
  options={initialOptions.map(v => ({ value: v, label: v }))} 
/>

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