导航栏在单击时同时打开所有菜单答案

【问题标题】：Nav bar opens all menus simultaneously upon clicking导航栏在单击时同时打开所有菜单
【发布时间】：2021-01-18 07:22:52
【问题描述】：

此代码 sn-p 是我的管理员用户导航栏。预期的行为是有 3 个图标（导航菜单、用户菜单和管理按钮图标）。问题是，当单击任何图标时，每个图标的下拉项目都会显示。预期行为是让每个下拉菜单显示给定图标的选定信息。

  function NavbarAdmin() {
  const classes = navbarStyle();
  const [anchorEl, setAnchorEl] = React.useState(null);
  const isMenuOpen = Boolean(anchorEl);

  const handleProfileMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleNavMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleManageMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

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

  const userMenu = (
    <Menu
      anchorEl={anchorEl}
      anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
      keepMounted
      transformOrigin={{ vertical: 'top', horizontal: 'left' }}
      open={isMenuOpen}
      onClose={handleMenuClose}
    >
      <MenuItem onClick={handleMenuClose}>Profile</MenuItem>
      <MenuItem onClick={handleMenuClose}>My account</MenuItem>
      <MenuItem onClick={handleMenuClose}>Sign Out</MenuItem>
    </Menu>
  );

  const navMenu = (
    <Menu
    anchorEl={anchorEl}
    anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
    keepMounted
    transformOrigin={{ vertical: 'top', horizontal: 'right' }}
    open={isMenuOpen}
    onClose={handleMenuClose}
  >
    <MenuItem onClick={handleMenuClose}>Home</MenuItem>
    <MenuItem onClick={handleMenuClose}>Movies</MenuItem>
    <MenuItem onClick={handleMenuClose}>Concessions</MenuItem>
    <MenuItem onClick={handleMenuClose}>Showtimes</MenuItem>
  </Menu>
  );

  const manageMenu = (
    <Menu
    anchorEl={anchorEl}
    anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
    keepMounted
    transformOrigin={{ vertical: 'top', horizontal: 'right' }}
    open={isMenuOpen}
    onClose={handleMenuClose}
  >
    <MenuItem onClick={handleMenuClose}>Movies</MenuItem>
    <MenuItem onClick={handleMenuClose}>Seats</MenuItem>
    <MenuItem onClick={handleMenuClose}>Test</MenuItem>
    <MenuItem onClick={handleMenuClose}>Test</MenuItem>
    <MenuItem onClick={handleMenuClose}>Test</MenuItem>
    <MenuItem onClick={handleMenuClose}>Test</MenuItem>
  </Menu>
  );

return (
    <div className={classes.grow}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            edge="start" className={classes.menuButton}
            color="inherit"
            aria-label="nav account"
            aria-haspopup="true"
            onClick={handleNavMenuOpen}
            color="inherit"
          >
            <MenuIcon />
          </IconButton>
          <Typography className={classes.acptheater} variant="h6" noWrap>
            ACP Theater
          </Typography>
          <div className={classes.grow} />
          <div>
            <IconButton aria-label="show messages" color="inherit">
              <Badge badgeContent={1} color="secondary">
                <MailIcon />
              </Badge>
            </IconButton>
            <IconButton
              edge="end" className={classes.menuButton}
              aria-label="user account"
              aria-haspopup="true"
              onClick={handleProfileMenuOpen}
              color="inherit"
            >
              <AccountCircle />
            </IconButton>
            <Button 
              edge="end" className={classes.menuButton}
              aria-label="user account"
              aria-haspopup="true"
              onClick={handleManageMenuOpen}
              color="inherit"color="inherit"
            >
                Manage</Button>
            <Button color="inherit">Login</Button>
          </div>
        </Toolbar>
      </AppBar>
      {manageMenu}
      {navMenu}
      {userMenu}
    </div>
  );
}

【问题讨论】：

标签： html reactjs material-ui navbar

【解决方案1】：

所有三个<Menu...s 都有anchorEl={anchorEl} - 所以状态setAnchorEl() 设置的任何内容都将匹配所有三个。

那些<Menu 参数应该使用所需的匹配值进行硬编码。

例子：

const handleProfileMenuOpen = (event) => {
  setAnchorEl('menuProfile');
};

...

const userMenu = (
  <Menu
    anchorEl={'menuProfile'}  <== this is the important one... right now all 3 are set to whatever was just clicked

【讨论】：

这将同时打开屏幕中间位置的所有菜单。问题仍然是单击相应图标时它们没有单独打开。我相信现在的问题来自： const isMenuOpen = Boolean(anchorEl);
请将此作为一个新问题提出。 StackOverflow 上的规则有几个原因，但对您而言最重要的原因是更多人会看到新问题并尝试提供帮助。请注意，如果需要，您可以在新问题中添加指向此问题的链接。但是解决这个问题的最快方法是创建一个新问题。我也会试着在几个小时后看看。 好机会！

【解决方案2】：

function NavbarAdmin() {
  const classes = navbarStyle();
  const [anchorEl1, setAnchorEl1] = React.useState(null);
  const [anchorEl2, setAnchorEl2] = React.useState(null);
  const [anchorEl3, setAnchorEl3] = React.useState(null);

  const isNavMenuOpen = Boolean(anchorEl1);
  const isProfileMenuOpen = Boolean(anchorEl2);
  const isManageMenuOpen = Boolean(anchorEl3);

  const handleNavMenuOpen = (event) => {
    setAnchorEl1(event.currentTarget);
  }

  const handleProfileMenuOpen = (event) => {
    setAnchorEl2(event.currentTarget);
  };

  const handleManageMenuOpen = (event) => {
    setAnchorEl3(event.currentTarget);
  };

  const handleNavMenuClose = () => {
    setAnchorEl1(null);
  };

  const handleProfileMenuClose = () => {
    setAnchorEl2(null);
  };

  const handleManageMenuClose = () => {
    setAnchorEl3(null);
  };

  const navMenu = (
    <Menu
    anchorEl={anchorEl1}
    anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
    keepMounted
    transformOrigin={{ vertical: 'top', horizontal: 'left' }}
    open={isNavMenuOpen}
    onClose={handleNavMenuClose}
  >
    <MenuItem onClick={handleNavMenuClose}>Home</MenuItem>
    <MenuItem onClick={handleNavMenuClose}>Movies</MenuItem>
    <MenuItem onClick={handleNavMenuClose}>Concessions</MenuItem>
    <MenuItem onClick={handleNavMenuClose}>Showtimes</MenuItem>
  </Menu>
  )

  const userMenu = (
    <Menu
      anchorEl={anchorEl2}
      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
      keepMounted
      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
      open={isProfileMenuOpen}
      onClose={handleProfileMenuClose}
    >
      <MenuItem onClick={handleProfileMenuClose}>Profile</MenuItem>
      <MenuItem onClick={handleProfileMenuClose}>My account</MenuItem>
      <MenuItem onClick={handleProfileMenuClose}>Sign Out</MenuItem>
    </Menu>
  );

  const manageMenu = (
    <Menu
    anchorEl={anchorEl3}
    anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
    keepMounted
    transformOrigin={{ vertical: 'top', horizontal: 'right' }}
    open={isManageMenuOpen}
    onClose={handleManageMenuClose}
  >
    <MenuItem onClick={handleManageMenuClose}>Movies</MenuItem>
    <MenuItem onClick={handleManageMenuClose}>Seats</MenuItem>
  </Menu>
  );

【讨论】：