单击导航栏会同时打开所有菜单

此代码片段是我的管理员用户的导航栏。预期行为是有 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>
  );
}

三个全部<Menu...s have anchorEl={anchorEl}- 所以无论状态设置如何setAnchorEl()将匹配所有三个。

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

Example:

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