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

Question

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

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

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

但是，单击任一菜单项都会打开 profile-menu 的子菜单。所以换句话说，点击 simple-menu 会打开 Profile、My Account 和 Logout，但它应该会打开 New、List 和 Report。

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);
}

然后您的点击回调需要反射(reflect)正确的菜单

<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);
}

如果这里有任何不合理的地方，请告诉我，我会尝试更详细地解释令人困惑的地方:)