如何在MUI菜单中多选菜单项并获取选中值

你拿到的'on'是HTML原生复选框的默认value，因为没给复选框绑定对应菜单项的实际值，也没维护多选的状态数组。以下是具体修改方案：

核心修改点 #

• 新增状态数组存储选中项的值
• 给复选框绑定对应菜单项的value
• 编写事件处理函数维护选中状态

修改后的完整代码 #

import React, { useState } from 'react';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Checkbox from '@mui/material/Checkbox';

export default function MultipleSelectMenu() {
  const [anchorEl, setAnchorEl] = useState(null);
  // 新增状态数组，存储选中的菜单项值
  const [selectedValues, setSelectedValues] = useState([]);

  const handleOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
    // 直接读取selectedValues即可获取所有选中项
    console.log('选中项：', selectedValues);
  };

  // 处理复选框选中/取消逻辑
  const handleCheckboxChange = (value) => {
    setSelectedValues(prev => {
      if (prev.includes(value)) {
        // 已选中则移除该项
        return prev.filter(item => item !== value);
      } else {
        // 未选中则添加该项
        return [...prev, value];
      }
    });
  };

  // 模拟菜单项数据
  const menuItems = [
    { value: '1', label: '选项1' },
    { value: '2', label: '选项2' },
    { value: '3', label: '选项3' },
    { value: '4', label: '选项4' },
  ];

  return (
    <div>
      <Button
        id="basic-button"
        aria-controls="basic-menu"
        aria-haspopup="true"
        onClick={handleOpen}
      >
        打开多选菜单
      </Button>
      <Menu
        id="basic-menu"
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={handleClose}
        MenuListProps={{
          'aria-labelledby': 'basic-button',
        }}
      >
        {menuItems.map(item => (
          <MenuItem key={item.value} onClick={(e) => e.stopPropagation()}>
            <Checkbox
              checked={selectedValues.includes(item.value)}
              // 绑定菜单项的实际值到复选框
              value={item.value}
              onChange={() => handleCheckboxChange(item.value)}
            />
            {item.label}
          </MenuItem>
        ))}
      </Menu>
    </div>
  );
}

关键细节说明 #

1. 阻止点击冒泡：给MenuItem添加onClick={(e) => e.stopPropagation()}，避免点击复选框时直接触发菜单关闭。
2. 绑定实际值：把菜单项的业务值（如'1'）传给Checkbox的value属性，替代默认的'on'。
3. 状态维护：通过handleCheckboxChange函数动态更新选中数组，确保状态与实际选中情况同步。
4. 获取选中值：在需要使用选中结果的地方（如菜单关闭时），直接读取selectedValues数组即可。

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