Material多选组件无法显示选中员工姓名的问题求助

你不需要额外维护names状态，直接通过选中的ID数组推导对应姓名即可，以下是两种可行方案：

方案一：直接在renderValue中转换ID为姓名 #

修改Select组件的renderValue属性，根据选中的ID匹配对应的员工姓名并拼接：

renderValue={(selectedIds) => 
  selectedIds
    .map(id => employees.find(emp => emp.id === id)?.name || id)
    .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 ListItemText from "@mui/material/ListItemText";
import Select from "@mui/material/Select";
import Checkbox from "@mui/material/Checkbox";

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250,
    },
  },
};

const employees = [
  { id: 1, name: "Rozele" },
  { id: 2, name: "Pat" },
  { id: 3, name: "Farlee" },
  { id: 4, name: "Eddie" },
  { id: 5, name: "Ingram" },
];

export default function MultipleSelectCheckmarks() {
  const [ids, setIds] = React.useState([]);

  const handleChange = (event) => {
    const { target: { value } } = event;
    setIds(value);
  };

  return (
    <div>
      <FormControl sx={{ m: 1, width: 300 }}>
        <InputLabel id="demo-multiple-checkbox-label">Tag</InputLabel>
        <Select
          labelId="demo-multiple-checkbox-label"
          id="demo-multiple-checkbox"
          multiple
          value={ids}
          onChange={handleChange}
          input={<OutlinedInput label="Tag" />}
          renderValue={(selectedIds) => 
            selectedIds
              .map(id => employees.find(emp => emp.id === id)?.name || id)
              .join(", ")
          }
          MenuProps={MenuProps}
        >
          {employees.map((employee) => (
            <MenuItem key={employee.id} value={employee.id}>
              <Checkbox checked={ids.includes(employee.id)} />
              <ListItemText primary={employee.name} />
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

方案二：维护names状态（可选） #

如果你坚持要维护names状态，可以在handleChange中通过选中的ID筛选出对应姓名：

const handleChange = (event) => {
  const { target: { value } } = event;
  setIds(value);
  // 根据ID数组筛选对应的姓名
  const selectedNames = value.map(id => employees.find(emp => emp.id === id)?.name || id);
  setNames(selectedNames);
};

然后修改renderValue为：

renderValue={() => names.join(", ")}

说明 #

• 方案一更简洁，避免冗余状态，推荐使用。
• ?.name || id是为了防止出现找不到匹配ID的情况，此时会显示原ID作为 fallback。

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