如何在MUI菜单中选择多个菜单项并返回选择的值

Question

我为 MUI 菜单中的每个 MenuItem 创建了一个复选框。用户可以一次选择多个菜单项。

有没有办法获取所选菜单项的值？

因为如果我输入 event.target.value，它就会在我的警报声明中给我 on。

https://stackblitz.com/edit/react-avdghj?file=Demo.js

请指导我如何实现这一目标。 非常感谢任何帮助

谢谢

Answer 1

您可以创建一个状态来跟踪选定的菜单项，并在单击菜单项时更新它。

我还添加了一个

useEffect

来记录所选项目的变化

import * as React from 'react';
import Box from '@mui/material/Box';
import Avatar from '@mui/material/Avatar';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import Tooltip from '@mui/material/Tooltip';
import PersonAdd from '@mui/icons-material/PersonAdd';
import Settings from '@mui/icons-material/Settings';
import Logout from '@mui/icons-material/Logout';
import Checkbox from '@mui/material/Checkbox';

export default function AccountMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);

  const [selectedItems, setSelectedItems] = React.useState([]);

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

  const handleClose = () => {
    setAnchorEl(null);
  };

  const handleItemClick = (item) => {
    if (selectedItems.includes(item)) {
      setSelectedItems(
        selectedItems.filter((selectedItem) => selectedItem !== item)
      );
    } else {
      setSelectedItems([...selectedItems, item]);
    }
  };

  React.useEffect(() => {
    console.log(selectedItems);
  }, [selectedItems]);

  return (
    <React.Fragment>
      <Box sx={{ display: 'flex', alignItems: 'center', textAlign: 'center' }}>
        <Tooltip title="Account settings">
          <IconButton
            onClick={handleClick}
            size="small"
            sx={{ ml: 2 }}
            aria-controls={open ? 'account-menu' : undefined}
            aria-haspopup="true"
            aria-expanded={open ? 'true' : undefined}
          >
            <Avatar sx={{ width: 32, height: 32 }}>M</Avatar>
          </IconButton>
        </Tooltip>
      </Box>
      <Menu
        anchorEl={anchorEl}
        id="account-menu"
        open={open}
        onClose={handleClose}
        PaperProps={{
          elevation: 0,
          sx: {
            overflow: 'visible',
            filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
            mt: 1.5,
            '& .MuiAvatar-root': {
              width: 32,
              height: 32,
              ml: -0.5,
              mr: 1,
            },
            '&::before': {
              content: '""',
              display: 'block',
              position: 'absolute',
              top: 0,
              right: 14,
              width: 10,
              height: 10,
              bgcolor: 'background.paper',
              transform: 'translateY(-50%) rotate(45deg)',
              zIndex: 0,
            },
          },
        }}
        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
      >
        <MenuItem onClick={() => handleItemClick('profile')}>
          <Checkbox checked={selectedItems.includes('profile')} /> Profile
        </MenuItem>
        <MenuItem onClick={() => handleItemClick('account')}>
          <Checkbox checked={selectedItems.includes('account')} /> My account
        </MenuItem>
      </Menu>
    </React.Fragment>
  );
}

Answer 2

尝试使用Mui 自动完成。您可以在菜单项中添加一个复选框，它将返回handleChange值中的值数组。