如何在 React/MUI 導航欄中制作單獨的菜單/菜單項？

Question

我正在為應用程序制作導航欄，但在分離多個菜單/菜單項時遇到了一些麻煩。 無論我嘗試什么，菜單和它們的菜單項都鏈接到同一個地方。

這是我的代碼：

import { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem'; 

const Navbar = (props) => {
    const navigate = useNavigate();

    const logout = () => {
        props.onAuthenticated(false);
        navigate('/');
    };

    const [anchorEl, setAnchorEl] = useState(null);
    const open = Boolean(anchorEl);

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

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

    return (
        <Grid item xs={12}>
            <Button component={Link} to='/'>Home</Button>
            <Button
                id="basic-button-1"
                aria-controls={open ? 'basic-menu-1' : undefined}
                aria-haspopup="true"
                aria-expanded={open ? 'true' : undefined}
                onClick={handleClick}
            >
                Movies
            </Button>
            <Button
                id="basic-button-2"
                aria-controls={open ? 'basic-menu-2' : undefined}
                aria-haspopup="true"
                aria-expanded={open ? 'true' : undefined}
                onClick={handleClick}
            >
                Actors
            </Button>
            <Menu
                id="basic-menu-1"
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
                MenuListProps={{
                'aria-labelledby': 'basic-button-1',
                }}
            >
                <MenuItem component={Link} to='/movies' onClick={handleClose}>All</MenuItem>
                <MenuItem component={Link} to='/movies/create' onClick={handleClose}>Create</MenuItem>
            </Menu>
            <Menu
                id="basic-menu-2"
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
                MenuListProps={{
                'aria-labelledby': 'basic-button-2',
                }}
            >
                <MenuItem component={Link} to='/actors' onClick={handleClose}>All</MenuItem>
                <MenuItem component={Link} to='/actors/create' onClick={handleClose}>Create</MenuItem>
            </Menu>

            {(props.authenticated) ? (
                <Button variant='outlined' onClick={logout}>Logout</Button>
            ) : ""}

        </Grid>
    );
};

export default Navbar;

在上面的代碼中，創建的導航欄包含“主頁”、“電影”和“演員”標題，“電影”和“演員”下拉菜單有效，但它們都鏈接到 /actors 頁面。 我嘗試了一些方法，例如創建單獨的 anchorEl、打開和處理程序，但這實際上扭轉了問題，“電影”和“演員”都開始鏈接到 /movies 而不是 /actors。 我似乎無法讓他們都鏈接到他們應該鏈接到的位置 go，我不禁認為我缺少一些簡單的東西。

如果有人知道我做錯了什么，我將不勝感激。 謝謝。

Answer 1

一種方法是根據按鈕名稱動態設置錨點。

狀態/功能：

 const [anchorState, setAnchorState] = useState({
    btn1: null,
    btn2: null,
  });

  const handleClick = (e) => {
    setAnchorState({ [e.target.name]: e.currentTarget });
  };

  const handleClose = (e) => {
    setAnchorState({ [e.target.name]: null });
  };

紐扣：

      <Button
        id="basic-button-1"
        aria-controls={Boolean(anchorState.btn1) ? "basic-menu-1" : undefined}
        aria-haspopup="true"
        aria-expanded={Boolean(anchorState.btn1) ? "true" : undefined}
        onClick={handleClick}
        name="btn1"
      >
        Movies
      </Button>

      <Button
        id="basic-button-2"
        aria-controls={Boolean(anchorState.btn2) ? "basic-menu-2" : undefined}
        aria-haspopup="true"
        aria-expanded={Boolean(anchorState.btn2) ? "true" : undefined}
        onClick={handleClick}
        name="btn2"
      >
        Actors
      </Button>

菜單：

      <Menu
        id="basic-menu-1"
        anchorEl={anchorState.btn1}
        open={Boolean(anchorState.btn1)}
        onClose={handleClose}
        MenuListProps={{
          "aria-labelledby": "basic-button-1",
        }}
      >
        <MenuItem component={Link} to="/movies" onClick={handleClose}>
          All
        </MenuItem>
        <MenuItem component={Link} to="/movies/create" onClick={handleClose}>
          Create
        </MenuItem>
      </Menu>
      <Menu
        id="basic-menu-2"
        anchorEl={anchorState.btn2}
        open={Boolean(anchorState.btn2)}
        onClose={handleClose}
        MenuListProps={{
          "aria-labelledby": "basic-button-2",
        }}
      >
        <MenuItem component={Link} to="/actors" onClick={handleClose}>
          All
        </MenuItem>
        <MenuItem component={Link} to="/actors/create" onClick={handleClose}>
          Create
        </MenuItem>
      </Menu>