我如何在 Material-ui 中實現下拉標題以反應？

Question

我的主要問題是它只呈現最后一個菜單下拉菜單，但我需要不同的菜單（你可以看到它背后的文字隱約出現）。 我不確定如何傳遞正確的道具/狀態來啟用它

import React from 'react';
import {Button, Menu, MenuItem} from "@material-ui/core";

function Header(){
const [anchorEl, setAnchorEl] = React.useState(null);

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

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

return (
    <div>
        <Button aria-controls="sessions-menu" aria-haspopup="true" onClick={handleClick}>
            Sessions
        </Button>
        <Button aria-controls="store-menu" aria-haspopup="true" onClick={handleClick}>
            Store
        </Button>
        <Button aria-controls= "about-menu" aria-haspopup="true" onClick={About} href="/about">
            About
        </Button>
        <Button aria-controls="account-menu" aria-haspopup="true" onClick={handleClick}>
            Account
        </Button>
        <Menu
            id="sessions-menu"
            anchorEl={anchorEl}
            getContentAnchorEl={null}
            keepMounted
            open={Boolean(anchorEl)}
            onClose={handleClose}
        >
            <MenuItem onClick={Book} href="/sessions/book">Book a Session</MenuItem>
            <MenuItem onClick={Host} href="/sessions/host">[S] Host a session</MenuItem>
        </Menu>
        <Menu
            id="store-menu"
            anchorEl={anchorEl}
            getContentAnchorEl={null}
            keepMounted
            open={Boolean(anchorEl)}
            onClose={handleClose}
        >
            <MenuItem onClick={Purchase}>Purchase</MenuItem>
            <MenuItem onClick={Sell}>[S] Sell</MenuItem>
        </Menu>
        <Menu
            id="about-menu"
            anchorEl={anchorEl}
            keepMounted
            open={Boolean(anchorEl)}
            onClose={handleClose}
        ></Menu>
        <Menu
            id="account-menu"
            anchorEl={anchorEl}
            keepMounted
            open={Boolean(anchorEl)}
            onClose={handleClose}
        >
            <MenuItem onClick={Lessons}>My Lessons</MenuItem>
            <MenuItem onClick={Items}>My Purchases</MenuItem>
        </Menu>
    </div>
);
}
export default Header;

任何幫助或建議以更簡單的方式實現我想要的東西都會膨脹

Answer 1

如文檔中給出的anchorEl - 它用於設置菜單的位置。 在您的代碼中，您對所有菜單使用了相同的anchorEl ，因此它只呈現最后一個菜單下拉菜單。

解決方案是將anchorEl與每個菜單分開。 為此，您需要為每個按鈕及其菜單創建作用域 MenuButton 組件。

您可以為每個按鈕使用單獨的組件及其菜單（重復），但最好有一組菜單並使用單個組件（可重用性）呈現它。

請在此處檢查運行代碼https://codesandbox.io/s/header-menu-dropdown-e9e7p

如果鏈接不起作用，我會將 Header 和 MenuButton 代碼放在這里。

頭文件.js

import React from "react";
import MenuButton from "./MenuButton";

const Header = () => {
  //added only two menu to demonstrate you can add more as per your requirement
  const menu = [
    {
      name: "Sessions",
      menuItems: [
        {
          name: "Book a Session",
          onClick: () => {},
          href:"" 
        },
        {
          name: "[S] Host a session",
          onClick: () => {},
          href:"" 
        }
      ]
    },
    {
      name: "Store",
      menuItems: [
        {
          name: "Purchase",
          onClick: () => {}
        },
        {
          name: "Sell",
          onClick: () => {}
        }
      ]
    }
  ];
  return menu.map((item, index) => <MenuButton key={index} menu={item} />);
};
export default Header;

MenuButton.js（帶有菜單的按鈕）

import React from "react";
import { Button, Menu, MenuItem } from "@material-ui/core";

const MenuButton = ({ menu }) => {
  const [anchorEl, setAnchorEl] = React.useState(null);

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

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

  return (
    <>
      <Button
        aria-controls={`${menu.name}-menu`}
        aria-haspopup="true"
        onClick={handleClick}
      >
        {menu.name}
      </Button>
      <Menu
        id={`${menu.name}-menu`}
        anchorEl={anchorEl}
        getContentAnchorEl={null}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        {menu.menuItems.map((item) => (
          <MenuItem onClick={item.onClick} href={item.href}>
            {item.name}
          </MenuItem>
        ))}
      </Menu>
    </>
  );
};
export default MenuButton;