应用栏菜单项未打开正确的子菜单

Question

我正在使用 React16 和 Material UI 库构建一个前端应用程序。

我正在尝试在顶部构建一个简单的导航栏，其中包含多个菜单项。我从material-ui.com网站上拿了“简单菜单”的例子。

我尝试在应用栏中添加第二个菜单项。

但是，单击任一菜单项会打开profile-menu 的子菜单。所以换句话说，点击simple-menu 会打开个人资料、我的帐户和注销，但它应该会打开新建、列表和报告。

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import AccountCircle from '@material-ui/icons/AccountCircle';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import MenuIcon from '@material-ui/icons/Menu';

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
}));

function MenuAppBar() {
  const classes = useStyles();
  const [auth, setAuth] = React.useState(true);
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);

  function handleMenu(event) {
    setAnchorEl(event.currentTarget);
  }

  function handleClose() {
    setAnchorEl(null);
  }

  return (
    <div className={classes.root}>
      <AppBar color="default" position="static">
        <Toolbar>
          <Typography variant="h6" className={classes.title}>
            App
          </Typography>
          {auth && (
            <div>
              <Button
                aria-owns={anchorEl ? 'simple-menu' : undefined}
                aria-haspopup="true"
                onClick={handleMenu}
              >
                Open Menu
              </Button>
              <Menu id="simple-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
                <MenuItem onClick={handleClose}>New</MenuItem>
                <MenuItem onClick={handleClose}>List</MenuItem>
                <MenuItem onClick={handleClose}>Report</MenuItem>
              </Menu>
            </div>
          )}
          {auth && (
            <div>
              <IconButton
                aria-owns={anchorEl ? 'profile-menu' : undefined}
                aria-haspopup="true"
                onClick={handleMenu}
              >
              <AccountCircle />
              </IconButton>
              <Menu id="profile-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
                <MenuItem onClick={handleClose}>Profile</MenuItem>
                <MenuItem onClick={handleClose}>My account</MenuItem>
                <MenuItem onClick={handleClose}>Logout</MenuItem>
              </Menu>
            </div>
          )}
        </Toolbar>
      </AppBar>
    </div>
  );
}

export default MenuAppBar;

Answer 1

首先你需要在一个枚举/对象中定义菜单

const MenuTypes = Object.freeze({
    Simple: 'simple',
    Profile: 'profile'
})

添加另一个状态项来跟踪您的活动菜单

const [activeMenu, setActiveMenu] = React.useState(null);

然后更新handleMenu 以接受菜单类型并将其设置为状态。 如果 menuType 将是第一个或第二个参数，我不记得了，所以验证一下。

function handleMenu(menuType, event) {
  setActiveMenu(menuType);
  setAnchorEl(event.currentTarget);
}

那么你的点击回调需要反映正确的菜单

<Button
  aria-owns={anchorEl ? 'simple-menu' : undefined}
  aria-haspopup="true"
  onClick={handleMenu.bind(null, MenuTypes.Simple}
>

然后你需要引用那个类型来确定当前是活跃的

open={!!activeMenu && activeMenu === MenuTypes.Simple}

不要忘记更新关闭处理程序

function handleClose() {
  setActiveMenu(null);
  setAnchorEl(null);
}

如果这里有什么不明白的地方，请告诉我，我会尝试更详细地解释令人困惑的地方:)