React-select Creatable组件：如何实现点击外部自动添加输入的新选项？

要实现点击离开组件（blur）时自动创建输入的新选项，可以通过监听组件的onBlur事件，结合输入值判断手动触发创建逻辑，具体实现如下：

核心思路 #

1. 跟踪输入框的实时值，避免依赖组件内部状态丢失内容
2. 在组件失焦（blur）时，校验输入值是否为有效新选项（非空、未在现有列表中）
3. 符合条件则创建新选项，更新列表并选中该选项

代码示例 #

import { useState, useRef } from 'react';
import CreatableSelect from 'react-select/creatable';

function AutoCreateCreatableSelect() {
  const [options, setOptions] = useState([
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
  ]);
  const [selectedOption, setSelectedOption] = useState(null);
  const inputValueRef = useRef('');

  // 记录实时输入内容
  const handleInputChange = (inputValue) => {
    inputValueRef.current = inputValue;
  };

  // 处理失焦事件，自动创建选项
  const handleBlur = () => {
    const inputValue = inputValueRef.current.trim();
    if (!inputValue) return;

    // 检查输入值是否已存在于选项列表
    const isDuplicate = options.some(opt => 
      opt.label.toLowerCase() === inputValue.toLowerCase()
    );
    if (isDuplicate) return;

    // 构造新选项
    const newOption = {
      value: inputValue.toLowerCase().replace(/\s+/g, '-'),
      label: inputValue,
    };

    // 更新选项列表并选中新选项
    setOptions(prev => [...prev, newOption]);
    setSelectedOption(newOption);
    inputValueRef.current = '';
  };

  return (
    <CreatableSelect
      options={options}
      value={selectedOption}
      onChange={setSelectedOption}
      onInputChange={handleInputChange}
      onBlur={handleBlur}
      placeholder="输入或选择选项..."
    />
  );
}

export default AutoCreateCreatableSelect;

关键说明 #

• 使用useRef存储输入值，避免组件重渲染导致实时内容丢失
• 失焦时做双重校验：排除空输入和重复选项，防止无效创建
• 统一新选项的value格式（如转小写、替换空格），保证选项唯一性

若需兼容异步加载选项的场景，可在handleBlur中加入异步校验逻辑，确保新选项不会与远程数据冲突。

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