如何在Material-UI Autocomplete组件中设置固定保留的默认选中项

核心逻辑 #

你的实现问题出在使用startAdornment模拟预选选项，这部分内容不属于Autocomplete的内部选中状态，不会被组件识别管理。直接通过Autocomplete自带的受控value属性和onChange事件做逻辑拦截即可满足需求。

实现步骤 #

• 先定义你需要的默认选中项，保证结构和你的options数组内的选项结构完全一致
• 初始化选中状态时就把默认项加入状态数组
• 在onChange回调中控制状态更新逻辑，保证默认项不会被非主动操作清除
• 如果需要禁止用户删除默认项，可通过renderTags给默认项的标签加上disabled属性

完整代码示例 #

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

// 自定义默认选中项，结构和options内的选项保持一致
const DEFAULT_SELECTED = { label: "固定默认项", id: "default" };
const OPTIONS = [
  DEFAULT_SELECTED,
  { label: "选项一", id: "1" },
  { label: "选项二", id: "2" },
  { label: "选项三", id: "3" },
];

export default function CustomAutocomplete() {
  const [selectedValues, setSelectedValues] = useState([DEFAULT_SELECTED]);

  const handleSelectChange = (_, newValues) => {
    // 逻辑1：允许用户主动删除默认项，直接更新状态即可
    // setSelectedValues(newValues);

    // 逻辑2：默认项禁止删除，永远保留在选中列表里
    const hasDefault = newValues.some(item => item.id === DEFAULT_SELECTED.id);
    setSelectedValues(hasDefault ? newValues : [...newValues, DEFAULT_SELECTED]);
  };

  return (
    <Autocomplete
      multiple
      options={OPTIONS}
      value={selectedValues}
      onChange={handleSelectChange}
      renderInput={(params) => <TextField {...params} label="多选选择器" />}
      // 可选：给默认项标签加禁用删除样式
      renderTags={(tagValue, getTagProps) =>
        tagValue.map((option, index) => (
          <Chip
            key={option.id}
            label={option.label}
            {...getTagProps({ index })}
            disabled={option.id === DEFAULT_SELECTED.id}
          />
        ))
      }
    />
  );
}

问题修复说明 #

• 选中其他选项时默认项消失：现在默认项属于Autocomplete的受控选中值，组件更新状态时会正常保留，不会被自动清除
• 预选项无法删除：默认项是Autocomplete渲染的标准选中标签，自带删除交互，也可根据需求配置是否禁用删除操作

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