导航栏在单击时同时打开所有菜单 [英] Nav bar opens all menus simultaneously upon clicking

问题描述

此代码段是我对管理员用户的导航栏.预期的行为是有3个图标(导航菜单，用户菜单和管理按钮图标).问题是，单击任何一个图标时，这些图标中的每个下拉菜单项都会全部显示.预期的行为是获取每个下拉菜单，以显示该给定图标的选定信息.

This code snippet is my nav bar for an admin user. The intended behavior is that there are 3 icons (navigation menu, user menu, and manage button icons). The issue is that the drop down items from each of these icons all display when clicking on any of the icons. The intended behavior is to get each dropdown menu to display the selected information for that given icon.

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

推荐答案

所有三个< Menu ... 都具有 anchorEl = {anchorEl} -所以无论在状态 setAnchorEl()上设置将匹配所有三个.

All three <Menu...s have anchorEl={anchorEl} - so whatever is set on state setAnchorEl() will match all three.

这些< Menu 参数应使用所需的匹配值进行硬编码.

Those <Menu parameters should be hard-coded with the desired match value.

示例:

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

这篇关于导航栏在单击时同时打开所有菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！