如何在React-Select组件中允许输入不在预设options中的任意值

云上老周

2026-10-4

解决方案

React Select 本身原生支持可创建自定义选项的能力，无需自己从零改造组件，按以下步骤配置即可：

1. 替换组件或开启可创建属性

两种启用方式二选一即可：

方式一：引入官方封装的 CreatableSelect 组件

import CreatableSelect from 'react-select/creatable';

方式二：给原有 Select 组件添加 isCreatable 属性

<Select isCreatable {...其他原有参数} />

2. 配置核心参数实现自定义值支持

核心需要配置 onCreateOption 回调，用来处理用户输入非预设选项时的逻辑，完整示例如下：

import { useState } from 'react';
// 若使用CreatableSelect则替换上面的导入为react-select/creatable
import Select from 'react-select';

const DEFAULT_OPTIONS = [
  { value: 'option1', label: '预设选项1' },
  { value: 'option2', label: '预设选项2' }
]

function App() {
  const [selected, setSelected] = useState(null);

  // 处理自定义值创建逻辑
  const handleCreateOption = (inputValue) => {
    const newCustomOption = {
      value: inputValue,
      label: inputValue
      // 可按需添加其他自定义字段
    }
    // 直接选中新创建的自定义值
    setSelected(newCustomOption);
    // 如果需要把自定义值加入下拉选项列表，也可以在这里更新你的options数组
  }

  return (
    <Select
      isCreatable // 若使用CreatableSelect组件可移除该属性
      options={DEFAULT_OPTIONS}
      value={selected}
      onChange={setSelected}
      onCreateOption={handleCreateOption}
      // 以下为可选配置，按需调整
      createOptionPosition="first" // 自定义值选项出现在下拉列表首位
      formatCreateLabel={(inputVal) => `使用自定义值：${inputVal}`} // 自定义下拉里创建选项的提示文案
    />
  )
}