我如何在React中的Material-ui中实现下拉标头? [英] How do i implement a dropdown header in Material-ui in react?

问题描述

我的主要问题是，它仅呈现最后一个菜单下拉菜单，但我需要不同的菜单(并且您可以看到它后面的文字隐约地出现).不确定如何通过正确的道具/状态来启用此功能

My main problem is that it's only rendering the last Menu Dropdown but i need different Menus (and you can see the text behind it faintly appearing). Am unsure how to pass the correct props / state to enable this

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;

实现我想要的更简单方法的任何帮助或建议都会膨胀

Any help or advice for a simpler way to achieve what i want would be swell

推荐答案

如文档中所述 anchorEl -用于设置菜单的位置.在您的代码中，所有菜单都使用相同的 anchorEl ，因此，它仅呈现最后一个Menu Dropdown.

As given in documentation anchorEl - It's used to set the position of the menu. In your code you used same anchorEl for all menu and as a result it's only rendering the last Menu Dropdown.

解决方案是将 anchorEl 与每个菜单分开.为此，您需要为每个具有其菜单的按钮创建具有范围的MenuButton组件.

solution is to have anchorEl separate to each menu. for that you need to create scoped MenuButton component for each button with its menu.

您可以为每个按钮及其菜单使用单独的组件(重复)，但最好具有多个菜单数组，并使用单个组件进行呈现(可重用性).

You can have separate component for each button with its menu (duplication) however it better have an array of menus and render it with single component(reusability).

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

please check running code here https://codesandbox.io/s/header-menu-dropdown-e9e7p

如果链接不起作用，我将在此处放置Header和MenuButton代码.

I will put Header and MenuButton code here if link not work.

Header.js

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(带有菜单的按钮)

MenuButton.js (button with its menu)

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;

这篇关于我如何在React中的Material-ui中实现下拉标头?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！