如何修改Material UI Select多选组件使其显示名称且保留选中ID数组

解决方法 #

你不需要调整存储选中值的逻辑，仅修改Select组件的renderValue属性的实现即可：当前你存储的personName本身就是选中项的ID数组，完全满足后续业务使用ID的需求，只需要在渲染展示值的时候，把ID映射为对应的名称即可。

核心修改点

将原来的renderValue属性替换为以下实现：

renderValue={(selected) => {
  // 将选中的ID数组映射为名称数组后拼接
  return selected
    .map((id) => names.find((item) => item.id === id)?.value ?? "")
    .filter(Boolean)
    .join(", ");
}}

完整组件代码参考

import * as React from 'react';
import OutlinedInput from '@mui/material/OutlinedInput';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import Checkbox from '@mui/material/Checkbox';
import ListItemText from '@mui/material/ListItemText';

const names = [
  { id: "1", value: "Oliver Hansen" },
  { id: "2", value: "Van Henry" },
  { id: "3", value: "Omar Alexander" }
];

export default function MultipleSelect() {
  const [personName, setPersonName] = React.useState([]);

  const handleChange = (event) => {
    const { value } = event.target;
    // 始终存储ID数组，不影响后续业务使用
    setPersonName(typeof value === 'string' ? value.split(',') : value);
  };

  return (
    <div>
      <FormControl sx={{ m: 1, width: 300 }}>
        <InputLabel id="demo-mutiple-checkbox-label">Tag</InputLabel>
        <Select
          labelId="demo-mutiple-checkbox-label"
          id="demo-mutiple-checkbox"
          multiple
          value={personName}
          name="first"
          onChange={handleChange}
          input={<OutlinedInput label="Tag" />}
          renderValue={(selected) => {
            return selected
              .map((id) => names.find((item) => item.id === id)?.value ?? "")
              .filter(Boolean)
              .join(", ");
          }}
        >
          {names.map((name) => (
            <MenuItem key={name.id} value={name.id}>
              <Checkbox checked={personName.indexOf(name.id) > -1} />
              <ListItemText primary={name.value} />
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

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