我如何在 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

如documentation anchorEl 中给出的 - 用于设置菜单的位置。在您的代码中，您对所有菜单都使用了相同的 anchorEl，因此它只呈现最后一个菜单下拉菜单。

解决方案是将anchorEl 与每个菜单分开。为此，您需要为每个 按钮及其菜单创建作用域 MenuButton 组件。

您可以为每个 按钮及其菜单（重复）设置单独的组件，但最好使用一组菜单并使用单个组件进行渲染（可重用性）。

请在此处查看运行代码https://codesandbox.io/s/header-menu-dropdown-e9e7p

如果链接不起作用，我会将 Header 和 MenuButton 代码放在这里。

Header.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;