React Material Autocomplete：禁止删除部分预选中的选项

要实现预选中的选项无法被删除且视觉上明确显示禁用状态，可以通过自定义标签渲染、拦截删除事件和状态兜底校验三个步骤来完成，以下是具体方案：

核心思路 #

1. 标记预选中的固定选项：在选项数据中添加标识区分固定项和可编辑项
2. 自定义标签样式：给固定项标签添加禁用样式，移除删除交互
3. 拦截删除操作：通过onChange兜底保留固定项，同时阻止键盘删除固定项的行为

代码实现示例 #

假设使用Material-UI的Autocomplete组件，以多选场景为例：

1. 定义带标识的选项数据 #

const options = [
  { label: '固定选项1', value: '1', isFixed: true },
  { label: '固定选项2', value: '2', isFixed: true },
  { label: '可选选项1', value: '3', isFixed: false },
  { label: '可选选项2', value: '4', isFixed: false },
];

2. 组件状态与事件处理 #

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

function FixedAutocomplete() {
  // 初始化选中值：默认选中所有固定选项
  const [selectedValues, setSelectedValues] = useState(
    options.filter(opt => opt.isFixed)
  );

  // 自定义标签渲染：给固定项添加禁用样式，移除删除事件
  const renderTags = (value, getTagProps) => {
    return value.map((option, index) => {
      const tagProps = getTagProps({ index });
      if (option.isFixed) {
        return (
          <Chip
            {...tagProps}
            label={option.label}
            disabled
            onDelete={null} // 移除删除触发事件
            style={{ opacity: 0.7, marginRight: 8 }}
          />
        );
      }
      return <Chip {...tagProps} label={option.label} />;
    });
  };

  // onChange兜底：确保固定选项不会被删除
  const handleChange = (event, newValue) => {
    const fixedItems = options.filter(opt => opt.isFixed);
    // 保留固定项 + 用户选择的非固定项
    const updatedValues = [...fixedItems, ...newValue.filter(opt => !opt.isFixed)];
    setSelectedValues(updatedValues);
  };

  // 拦截键盘删除：阻止删除固定标签
  const handleKeyDown = (event) => {
    if (event.key === 'Backspace') {
      const activeTag = document.activeElement?.closest('.MuiChip-root');
      if (activeTag?.classList.contains('Mui-disabled')) {
        event.preventDefault();
      }
    }
  };

  return (
    <Autocomplete
      multiple
      options={options}
      value={selectedValues}
      onChange={handleChange}
      renderTags={renderTags}
      onKeyDown={handleKeyDown}
      renderInput={(params) => (
        <TextField {...params} label="带固定选项的自动完成" fullWidth />
      )}
    />
  );
}

export default FixedAutocomplete;

效果说明 #

• 固定选项的标签会显示为禁用状态（半透明、无删除叉号），用户一眼就能识别不可删除
• 点击固定标签的删除区域无响应，按Backspace键也无法删除固定项
• 即使通过其他方式尝试修改选中状态，onChange的兜底逻辑会强制保留固定选项，确保数据一致性

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