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

让我知道这里是否没有任何意义，我将尝试更详细地解释什么是令人困惑的：）

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

1 个答案: