MUI Autocomplete多选freesolo模式下如何识别用户输入的新增值？

以下两种实现方案均远优于对比前后选中数组的方式：

方案1：利用Autocomplete原生回调参数直接识别（最推荐） #

MUI的Autocomplete组件onChange回调自带的参数已经可以直接区分用户操作类型，无需自行比对前后数组：

• 开启freeSolo、multiple属性的前提下，onChange的第三个参数为操作类型reason，当用户手动输入新值并选中时，reason的值固定为createOption
• 第四个参数details中的option字段就是用户本次新增的自定义值，直接取该值进行后续业务逻辑处理即可
• 若要规避用户输入内容和预设选项完全重复的情况，只需拿该值到预设选项数组中匹配一次即可，不需要遍历全量选中值

示例代码：

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

// 预设选项列表
const PRESET_OPTIONS = [
  { label: '预设选项1', value: 'opt1' },
  { label: '预设选项2', value: 'opt2' },
  // 其余预设选项
];

const CustomMultiAutocomplete = () => {
  const [selected, setSelected] = useState([]);

  return (
    <Autocomplete
      multiple
      freeSolo
      options={PRESET_OPTIONS}
      value={selected}
      onChange={(event, newSelected, reason, details) => {
        setSelected(newSelected);
        // 仅捕获用户新增自定义值的操作
        if (reason === 'createOption') {
          const newAddValue = details.option;
          // 可选校验：确认该值不在预设列表中
          const isInPreset = PRESET_OPTIONS.some(opt => opt.value === newAddValue.value || opt.label === newAddValue);
          if (!isInPreset) {
            // 执行你的业务逻辑，比如弹出补充信息对话框
            console.log('捕获到新增自定义值：', newAddValue);
          }
        }
      }}
      getOptionLabel={(option) => option.label || option}
      isOptionEqualToValue={(option, value) => option.value === value.value}
      renderInput={(params) => <TextField {...params} label="选项输入" placeholder="输入或选择内容" />}
    />
  )
}

方案2：给选项加标识字段简化后续判断 #

如果需要在多个业务场景区分预设值和自定义值，可以在创建新选项时直接加标识字段，不需要每次都查询预设数组：

<Autocomplete
  {/* 其余基础属性和方案1一致 */}
  onChange={(event, newSelected, reason, details) => {
    if (reason === 'createOption') {
      // 给自定义值加专属标识
      const formattedCustomOption = {
        label: details.option,
        value: details.option,
        isCustom: true
      };
      // 更新选中列表
      const finalSelected = [
        ...newSelected.filter(opt => opt !== details.option),
        formattedCustomOption
      ];
      setSelected(finalSelected);
      // 后续判断直接读isCustom字段即可，无需重复匹配预设列表
      console.log('新增自定义值：', formattedCustomOption);
    } else {
      setSelected(newSelected);
    }
  }}
/>

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