菜单列表与另一个菜单列表重叠

Question

我是新手反应.js和材料UI，我正在尝试为我的项目制作导航顶部导航栏， 我在顶部导航栏中使用"MenuList"组合，第一个按钮是成功的，但是当我添加另一个按钮并单击它时，它将与第一个菜单列表重叠。有人可以给出一些提示吗？谢谢大家。

这是问题图像

这是我的导航栏源代码

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import Button from '@material-ui/core/Button';
import Grow from '@material-ui/core/Grow';
import Popper from '@material-ui/core/Popper';
import MenuItem from '@material-ui/core/MenuItem';
import MenuList from '@material-ui/core/MenuList';
import { Link, Route, withRouter } from 'react-router-dom';
const useStyles = makeStyles({
root: {
flexGrow: 1,
},
});
export default function CenteredTabs() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const [open, setOpen] = React.useState(false);
const anchorRef = React.useRef(null);
const handleChange = (event, newValue) => {
setValue(newValue);
};
const handleToggle = () => {
setOpen(prevOpen => !prevOpen);
};
const handleClose = event => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return;
}
setOpen(false);
};
function handleListKeyDown(event) {
if (event.key === 'Tab') {
event.preventDefault();
setOpen(false);
}
}
// return focus to the button when we transitioned from !open -> open
const prevOpen = React.useRef(open);
React.useEffect(() => {
if (prevOpen.current === true && open === false) {
anchorRef.current.focus();
}
prevOpen.current = open;
}, [open]);
return (
<Paper className={classes.root}>
<Tabs
value={value}
onChange={handleChange}
indicatorColor="secondary"
textColor="primary"
>
<Tab label="WeniPay" to="/" component={Link} style={{ float: "left" }} />
<Tab label="Home" to="/" component={Link} />
<Tab label="Login" to="/works" component={Link} />
<Tab label="Pay" to="/payPage" component={Link} />
</Tabs>
<Button
ref={anchorRef}
aria-controls={open ? 'menu-list-grow' : undefined}
aria-haspopup="true"
onClick={handleToggle}
>
Toggle Menu Grow
</Button>
<Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
{({ TransitionProps, placement }) => (
<Grow
{...TransitionProps}
style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
<Button
ref={anchorRef}
aria-controls={open ? 'menu-list-grow' : undefined}
aria-haspopup="true"
onClick={handleToggle}
>
s
</Button>
<Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
{({ TransitionProps, placement }) => (
<Grow
{...TransitionProps}
style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
<MenuItem onClick={handleClose}>1</MenuItem>
<MenuItem onClick={handleClose}>2</MenuItem>
<MenuItem onClick={handleClose}>3</MenuItem>
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</Paper>
);
}

这是主页

import React from 'react';
import styles from './App.module.scss';
import { Link, Route, withRouter } from 'react-router-dom';
import HomePage from './HomePage';
import WorkPage from './WorkPage';
import WorkPageDetail from './WorkPageDetail';
import Header from './header';
import PayPage from './PayPage';
class App extends React.Component {
render() {
const { location } = this.props;
return (
<div className={styles.App}>
{/* header */}
<header className={styles.header}>
<div className={styles.box}>
<Header />
</div>
</header>
{/* content */}
<section className={styles.content}>
<Route path="/" exact component={HomePage} />
<Route path="/works" exact component={WorkPage} />
<Route path="/works/:id" exact component={WorkPageDetail} />
<Route path="/payPage" exact component={PayPage} />
</section>
{/* footer */}
<footer className={styles.footer}>
<p>© <b>MyPay</b></p>
</footer>
</div>
);
}
}
export default withRouter(App);

Answer 1

您可以将archorEl设置为数组，以便可以像

// set anchor as empty list so we can track it later
const [anchorEl, setAnchorEl] = React.useState<[] | HTMLElement[]>([]));

const openMenu = (event, index) => {
const tempAnchor = anchorEl;
tempAnchor[index] = event.currentTarget; // only set change version 
setAnchorEl(tempAnchor);
};
const closeMenu = () => {
setAnchorEl([]); // now we set it to empty list 
}

我们的多伦多证券交易所会像

<Menu
id={row.id}
anchorEl={anchorEl[index]}
keepMounted
open={Boolean(anchorEl[index])}
onClose={() => closeMenu()}
>
<MenuItem> Foo</MenuItem>
<MenuItem> Bar</MenuItem>  
</Menu>