如何在MUI Select组件中实现用户输入自定义文本创建新选项

原生MUI Select组件仅支持从预设选项列表中做选择，无内置文本输入交互，要实现用户输入自定义文本生成新可选选项的需求，可根据现有代码的改造成本选择以下两种可落地方案：

方案1：使用Autocomplete组件实现（官方标准方案，推荐优先选择） #

这是MUI官方针对“选择+输入新建”混合场景提供的原生组件，不需要手动拼装交互逻辑，且支持通过样式配置完全复刻原生Select的视觉效果，不会破坏现有页面的UI一致性。
核心配置点：

• 开启freeSolo属性，允许用户输入任意不在预设列表中的文本值，同时支持回车快速选中输入的内容
• 监听输入框的内容变化，当用户输入的内容不存在于现有选项列表中时，动态将其追加到选项数组中
• 可通过renderOption自定义渲染逻辑，对即将新建的选项加上明确的操作提示，降低用户理解成本

最小可用实现代码：

import { useState } from 'react';
import { Autocomplete, TextField } from '@mui/material';

function CustomOptionSelect() {
  // 原有业务预设选项
  const [optionList, setOptionList] = useState(['选项1', '选项2', '选项3']);
  // 当前选中值
  const [selectedValue, setSelectedValue] = useState(null);

  return (
    <Autocomplete
      freeSolo
      options={optionList}
      value={selectedValue}
      // 输入内容变化时动态追加新选项
      onInputChange={(event, newInput) => {
        const trimmedInput = newInput.trim();
        if (trimmedInput && !optionList.includes(trimmedInput)) {
          setOptionList(prevList => [...prevList, trimmedInput]);
        }
      }}
      // 选中值变化时更新状态
      onChange={(event, newVal) => {
        setSelectedValue(newVal);
      }}
      renderInput={(params) => (
        <TextField 
          {...params} 
          label="选择或输入自定义内容" 
          variant="outlined"
        />
      )}
      // 自定义选项渲染，给新建选项加提示
      renderOption={(props, option) => (
        <li {...props}>
          {optionList.includes(option) ? option : `创建新选项：${option}`}
        </li>
      )}
    />
  )
}

方案2：原生Select组件的定向扩展改造 #

如果现有代码强依赖原生Select组件，无法快速替换为Autocomplete，可手动在Select的下拉弹层中嵌入输入框实现自定义能力：

• 通过MenuProps属性自定义Select的下拉弹出容器，在下拉列表的顶部固定位置插入一个受控输入组件
• 拦截输入框的点击冒泡事件，避免用户点击输入框时误触发Select的下拉关闭逻辑
• 监听输入内容变化，将用户输入的文本渲染为列表顶部的临时选项，用户选中该选项时，将内容追加到预设选项数组，同时将Select的当前值设置为该自定义内容
• 这种方案需要手动处理键盘导航、外部点击关闭、下拉滚动联动等细节交互，维护成本远高于方案1，仅适合有深度定制Select UI需求的场景使用。

常见注意事项 #

• 动态追加自定义选项时需要做去重校验，避免相同内容重复生成多个选项
• 如果需要将自定义选项同步到业务后端，建议在选中自定义值的节点触发对应接口请求，不要等整表单提交时再统一处理
• 表单必填校验场景下，需要单独识别用户输入的自定义值，不要直接基于预设选项列表做校验判断。

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