Material-UI：支持保留用户选择顺序的多选Select组件实现咨询

默认MUI的多选Select组件会按照备选项在菜单中的排列顺序对选中值做排序，不会保留用户的点击顺序，要实现按选择顺序保存结果，可通过上层自定义逻辑实现，不需要修改组件源码：

核心实现思路 #

• 单独维护自定义状态数组存储选中项，完全不依赖MUI内置的value自动排序逻辑
• 重写选中事件处理逻辑：用户点击某一选项时，判断该选项是否已经在选中数组中
  • 若未存在，直接追加到数组末尾
  • 若已存在，删除数组中对应位置的该选项
• 自定义回显逻辑：Select组件的value、选中回显内容都直接使用自己维护的顺序数组，MenuItem仅需要判断当前项是否在选中数组中即可，不需要处理位置关系

代码示例（基于MUI v5） #

import { useState } from 'react';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';
import OutlinedInput from '@mui/material/OutlinedInput';

const options = ['A', 'B', 'C', 'D', 'E'];

export default function OrderPreservedMultiSelect() {
  // 存储按用户选择顺序排列的选中项
  const [selected, setSelected] = useState([]);

  const handleChange = (event) => {
    // 取用户刚刚点击的选项
    const clickedOption = event.target.value[event.target.value.length - 1];
    const existIndex = selected.indexOf(clickedOption);
    
    if (existIndex === -1) {
      // 新增选中项，追加到末尾
      setSelected([...selected, clickedOption]);
    } else {
      // 取消选中，删除对应位置的项
      const newSelected = [...selected];
      newSelected.splice(existIndex, 1);
      setSelected(newSelected);
    }
  };

  return (
    <FormControl sx={{ m: 1, width: 300 }}>
      <InputLabel id="order-select-label">选项</InputLabel>
      <Select
        labelId="order-select-label"
        id="order-select"
        multiple
        value={selected}
        onChange={handleChange}
        input={<OutlinedInput label="选项" />}
        // 按自定义顺序回显选中项
        renderValue={(selected) => selected.join(', ')}
      >
        {options.map((option) => (
          <MenuItem key={option} value={option}>
            <input type="checkbox" checked={selected.includes(option)} />
            <span style={{ marginLeft: 8 }}>{option}</span>
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
}

注意事项 #

• 如果使用MUI v4，仅需要调整组件引入路径和对应属性名，核心逻辑完全通用
• 若备选项为对象类型，把indexOf/includes替换为findIndex，按唯一主键判断是否选中即可
• 也可以直接给MenuItem绑定onClick事件直接拿到点击的选项，不需要依赖Select onChange返回的数组，逻辑兼容性更强

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