如何在MUI多选Select组件中获取选中项的ID和值

当然可以，只需要调整组件的value绑定和相关逻辑，就能同时获取选中项的ID和值，具体修改如下：

核心修改点 #

• 将MenuItem的value从item.value改为完整的item对象，让选中时能拿到包含ID和值的完整数据
• 调整handleChange的状态更新逻辑，此时选中值是对象数组，无需字符串分割处理
• 适配renderValue和Checkbox的判断逻辑，基于对象属性处理显示与选中状态

修改后的完整代码 #

import { useState } from "react";
import { FormControl, Select, MenuItem, Checkbox, ListItemText } from "@mui/material";

const menuItems = [
  { id: "8271e42a-8982-44b8-9745-3271e0cf9d12", value: "Item 1" },
  { id: "c0f3e462-02f8-4d8d-ae05-6965b7902a80", value: "Item 2" },
  { id: "c0f3dfyh-02f8-4d8d-ae05-6965b7dw3456", value: "Item 3" }
];

export default function App() {
  const [selected, setSelected] = useState([]);

  const handleChange = (event) => {
    const { target: { value } } = event;
    setSelected(value);
    // 此时selected为包含id和value的对象数组，可直接使用
    console.log("选中项：", selected);
  };

  const ITEM_HEIGHT = 48;
  const ITEM_PADDING_TOP = 8;

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

  return (
    <div className="App">
      <FormControl fullWidth={true}>
        <Select
          multiple
          value={selected}
          onChange={handleChange}
          // 提取对象的value字段拼接显示
          renderValue={(selected) => selected.map(item => item.value).join(", ")}
          MenuProps={lteProps}
        >
          {menuItems.map((item) => (
            <MenuItem key={item.id} value={item}>
              {/* 用id判断选中状态，避免value重复导致的错误 */}
              <Checkbox checked={selected.some(selectedItem => selectedItem.id === item.id)} />
              <ListItemText primary={item.value} />
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

说明 #

修改后，selected状态数组存储的是选中项的完整对象，你可以在任意逻辑中直接获取ID和值，比如selected.map(item => item.id)拿到所有选中ID，selected.map(item => item.value)拿到所有选中值。用id判断选中状态比value更可靠，能避免不同项value重复时的判断错误。

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