单击菜单项后材质 UI 菜单未关闭

Question

这是直接来自 MUI 菜单 - 自定义菜单的代码。我不想放置我的代码，因为有一些内置函数使其更加混乱。

在我的代码（不是这个）中，单击菜单项时我会打开一个 MUI 对话框。问题是提交对话框后菜单不会消失。

我想知道如何在单击菜单上的任何内容（菜单项）后立即关闭菜单。

谢谢

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Menu, { MenuProps } from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import DraftsIcon from '@material-ui/icons/Drafts';
import SendIcon from '@material-ui/icons/Send';

const StyledMenu = withStyles({
  paper: {
    border: '1px solid #d3d4d5',
  },
})((props: MenuProps) => (
  <Menu
    elevation={0}
    getContentAnchorEl={null}
    anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'center',
    }}
    transformOrigin={{
      vertical: 'top',
      horizontal: 'center',
    }}
    {...props}
  />
));

const StyledMenuItem = withStyles((theme) => ({
  root: {
    '&:focus': {
      backgroundColor: theme.palette.primary.main,
      '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
        color: theme.palette.common.white,
      },
    },
  },
}))(MenuItem);

export default function CustomizedMenus() {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

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

  return (
    <div>
      <Button
        aria-controls="customized-menu"
        aria-haspopup="true"
        variant="contained"
        color="primary"
        onClick={handleClick}
      >
        Open Menu
      </Button>
      <StyledMenu
        id="customized-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <StyledMenuItem>
          <ListItemIcon>
            <SendIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText primary="Sent mail" />
        </StyledMenuItem>
        <StyledMenuItem>
          <ListItemIcon>
            <DraftsIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText primary="Drafts" />
        </StyledMenuItem>
        <StyledMenuItem>
          <ListItemIcon>
            <InboxIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText primary="Inbox" />
        </StyledMenuItem>
      </StyledMenu>
    </div>
  );
}

Answer 1

您可以将

handleClose

处理程序分配给

onClick

本身的

<Menu>

属性，如下所示：

<StyledMenu
  onClick={handleClose}
  onClose={handleClose}
  {...yourProps}
>
 ...
</StyledMenu>

Answer 2

您可以将 onClick 属性添加到

MenuItem

:

<StyledMenuItem onClick={handleClose}>Text</StyledMenuItem>

Answer 3

我遇到了类似的问题，无法应用 hangindev.com 解决方案来解决我的问题。唯一的区别是我的菜单项

children

传递到菜单组件之外。 您可以在

onBlur

上使用

StyledMenu

事件。

<StyledMenu
    id="customized-menu"
    anchorEl={anchorEl}
    keepMounted
    open={Boolean(anchorEl)}
    onClose={handleClose}
    onBlur={handleClose}
  >{children}<StyledMenu>

抱歉两年后才发帖，希望对您有所帮助。我使用了@mui/material 5.4.0版本。

Answer 4

onBlur={handleClose} 如果将 comp 作为 other 的子级传递，则可以正常工作

Answer 5

我们可以在

中使用

onClick

代替

onClose

   <StyledMenu
        id="customized-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClick={onClose}
    >

Answer 6

我在 MUI 菜单中也遇到了同样的问题

因此，作为解决方案，我禁用了门户并取消设置 MUI 菜单组件的 zIndex。

<Menu
  sx={{
    zIndex: { xs: 1300, md: 'unset' },
  }}
  disablePortal
>
  // Lists  
</Menu>

Answer 7

我遇到了同样的问题，而投票最高的答案对我不起作用。我没有与 Material UI 作斗争，而是保持简单，而且效果很好：

{anchorElUser ? (
  <Menu
    anchorEl={anchorElUser}
    open={true}
    onClose={handleClose}
    onClick={handleClose}
  >
    {menuItems.map(...)}
  </Menu>
) : null}