如何将React-Select用作支持自定义输入的可选自动完成字段？

完全可以实现你提出的三类使用规则，使用 React-Select 官方提供的CreatableSelect组件配合简单的状态管理即可完成。

核心配置说明 #

• 引入CreatableSelect替代基础的 Select 组件，该组件原生支持将用户输入内容作为自定义选项的能力
• 组件默认开启isSearchable属性，支持用户自由输入内容
• 可通过formatCreateLabel自定义下拉列表中创建自定义选项的提示文案
• 同时监听onChange（选中选项回调）和onInputChange（输入内容变化回调）两个事件，分别存储选中值和实时输入值

最简实现示例 #

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

// 预设下拉选项
const options = [
  { value: 'beijing', label: '北京' },
  { value: 'shanghai', label: '上海' },
  { value: 'guangzhou', label: '广州' },
];

export default function AutoCompleteField() {
  // 存储用户选中的选项
  const [selectedOption, setSelectedOption] = useState(null);
  // 存储用户实时输入的文本
  const [inputText, setInputText] = useState('');

  // 按规则生成最终字段值
  const getFinalFieldValue = () => {
    // 规则1：有选中选项时返回选中项的value，可按需替换为label
    if (selectedOption) return selectedOption.value;
    // 规则2、3：输入内容去空后返回，无输入则返回空
    return inputText.trim();
  };

  return (
    <div>
      <CreatableSelect
        value={selectedOption}
        onChange={setSelectedOption}
        inputValue={inputText}
        onInputChange={setInputText}
        options={options}
        placeholder="请输入或选择内容"
        isClearable
      />
      <button onClick={() => console.log('最终字段值：', getFinalFieldValue())}>
        测试提交
      </button>
    </div>
  );
}

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