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

我正在使用React16和MaterialUI库构建前端应用程序

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

我试图在应用程序栏中添加第二个菜单项

但是，单击任一菜单项都会打开

配置文件菜单

的子菜单。因此，换句话说，点击

简单菜单

会打开个人资料、我的帐户和注销，但会打开新的、列表和报告

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;

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/IconButton”导入IconButton；
从“@material ui/icons/AccountCircle”导入AccountCircle；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/Menu”导入菜单；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/icons/Menu”导入菜单图标；
const useStyles=makeStyles（主题=>({
根目录：{
flexGrow:1，
},
菜单按钮：{
边缘光：主题。间距（2），
},
标题：{
flexGrow:1，
},
}));
函数MenuAppBar（）{
const classes=useStyles（）；
const[auth，setAuth]=React.useState（true）；
常量[anchorEl，setAnchorEl]=React.useState（null）；
常量开=布尔值（主播）；
功能手柄菜单（事件）{
Setancorel（事件当前目标）；
}
函数handleClose（）{
setAnchorEl（空）；
}
返回(
应用程序
{auth&&(
打开菜单
新的
列表
报告
)}
{auth&&(
轮廓
我的帐户
注销
)}
);
}
导出默认菜单栏；

首先需要定义枚举/对象中的菜单

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

别忘了更新close处理程序

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

---

如果这里有任何不合理的地方，请告诉我，我将尝试更详细地解释什么是令人困惑的：）

您应该将open定义为映射到的常量类型。例如，

open={！！anchorEl&&anchorEl=='profile'}

仅供参考，

是比类型构造函数更好的布尔检查

boolean

@JohnRuddell谢谢！我试过了，但似乎不起作用。现在两个菜单都没有打开。让我写一个解决方案，因为你必须对anchorElThanks应用相同的值！我现在看到这个错误：

index.js:1375警告：失败的道具类型：无效的道具

anchorEl`提供给

ForwardRef（菜单）

我确认menuType是第一个参数，它在console.log中显示了正确的值。anchorEl应该是什么？意思是菜单想要的道具？可能需要像以前一样，将currentTarget存储在这些changes@pengz让我更新我的答案，你需要跟踪两者actually@pengz试一试

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