react-select Creatable组件如何在按键触发时将新建选项添加到options列表

问题根因 #

1. 输入时自动出现新建选项是Creatable组件的默认行为：默认会将当前输入值作为临时创建选项实时渲染在下拉列表中，和你手动维护的selection数组无关。
2. 重复新建选项有两个触发原因：
   • handleKeyDown中每次按键都会触发一个2700ms的延迟定时器，输入速度慢时多次按键会生成多个定时器，最终多次执行setNewValues将同一个输入值重复添加到selection数组
   • 添加新选项前没有做存在性校验，且你定义的新选项缺少value字段，react-select默认通过value字段判断选项唯一性，缺少该字段会导致无法识别重复项
3. 你的组件调用存在属性错误：重复声明了inputValue属性，且value绑定的selectedValues.selected不存在（selectedValues是数组类型）

解决方法 #

1. 关闭默认实时创建选项渲染

给CreatableSelect添加shouldCreateOption={() => false}属性，禁用组件默认的自动创建临时选项逻辑，只有你手动触发添加时才会新增选项。

2. 优化定时器逻辑避免重复执行

用useRef存储定时器id，每次触发handleKeyDown时先清空之前的定时器，确保只有最后一次按键的定时器会执行：

import { useRef } from 'react';
// 新增定时器ref
const timerRef = useRef(null);

const handleKeyDown = () => {
  // 清空之前的定时器
  if (timerRef.current) clearTimeout(timerRef.current);
  timerRef.current = setTimeout(() => {
    setNewValues();
  }, 2700);
};

3. 新增选项时增加去重逻辑，补全选项必填字段

修改setNewValues逻辑，添加前先判断同值选项是否已经存在，同时补全选项的value字段：

const setNewValues = () => {
  const trimedValue = inputValue.trim();
  if (trimedValue === '') return;
  
  // 去重判断
  const isExist = selection.some(item => item.value === trimedValue);
  if (!isExist) {
    const newOption = { label: trimedValue, value: trimedValue };
    setSelection([...selection, newOption]);
  }

  let difference = current.filter((x) => !value.includes(x));
  setInputValue('');
  setselectedValues(difference);
};

4. 修正组件调用的错误属性

<CreatableSelect
  options={selection}
  isMulti
  onChange={handleOnChange}
  onInputChange={handleInputChange}
  inputValue={inputValue}
  // 修正value绑定，根据你的业务逻辑绑定current或者selectedValues即可
  value={current}
  onKeyDown={handleKeyDown}
  // 禁用默认创建选项逻辑
  shouldCreateOption={() => false}
/>

内容的提问来源于stack exchange，提问作者Yusef-d1