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

Question

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

here is the problem image

这是我的导航栏源代码

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 
}

我们的 tsx 会是这样的

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