[英]How do i implement a dropdown header in Material-ui in react?
我的主要问题是它只呈现最后一个菜单下拉菜单,但我需要不同的菜单(你可以看到它背后的文字隐约出现)。 我不确定如何传递正确的道具/状态来启用它
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;
任何帮助或建议以更简单的方式实现我想要的东西都会膨胀
如文档中给出的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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.