如何分配哪些菜单项打开在 当材料用户界面应用栏上存在多个菜单时，使用 React 打开

Question

我根据材料UI网站上给出的示例创建了一个带有菜单的应用栏，它在一个菜单上工作正常。但是当我尝试添加第二个下拉菜单时，单击任一图标时，我都会看到相同的一组菜单项，如图所示。

以下是单击任一图标时显示的菜单项列表

import React, { Component } from 'react';
// Material UI Imports
import { withStyles } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import Tooltip from 'material-ui/Tooltip';
import Menu, { MenuItem } from 'material-ui/Menu';
import PeopleIcon from 'material-ui-icons/People';
import ViewListIcon from 'material-ui-icons/ViewList';
import CompareArrowsIcon from 'material-ui-icons/CompareArrows';
const styles = {
  root: {
    width: '100%',
  },
  flex: {
    flex: 1,
  },
  menuItem: {
    paddingLeft: '10px'
  }
}
class Header extends Component {
  constructor(props) {
    super(props);
    this.state = { anchorEl: null };
  }
  handleMenu = event => {
    console.log(event.currentTarget);
    this.setState({ anchorEl: event.currentTarget });
  }
  handleClose = () => {
    this.setState({ anchorEl: null });
  }
  render() {
    const { classes } = this.props;
    const { anchorEl } = this.state;
    const open = Boolean(anchorEl);
    return(
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar>
            <Typography type="title" color="inherit" className={classes.flex}>
              New Faces
            </Typography>
            {/* Menu Item One */}
            <div>
              <Tooltip title="Lists" className={classes.menuItem}>
                <IconButton
                  color="inherit"
                  aria-owns={open ? 'menu-list' : null}
                  aria-haspopup="true"
                  onClick={this.handleMenu}
                >
                  <ViewListIcon />
                </IconButton>
              </Tooltip>
              <Menu
                id="menu-list"
                anchorEl={anchorEl}
                anchorOrigin={{
                  vertical: 'top',
                  horizontal:'right',
                }}
                transformOrigin={{
                  vertical: 'top',
                  horizontal:'right',
                }}
                open={open}
                onClose={this.handleClose}
              >
                <MenuItem onClick={this.handleClose}>Create List</MenuItem>
                <MenuItem onClick={this.handleClose}>List 1</MenuItem>
                <MenuItem onClick={this.handleClose}>List 2</MenuItem>
              </Menu>
            </div>
            {/* Menu Item Two */}
            <div>
              <Tooltip title="User Management" className={classes.menuItem}>
                <IconButton
                  color="inherit"
                  aria-owns={open ? 'menu-appbar' : null}
                  aria-haspopup="true"
                  onClick={this.handleMenu}
                >
                  <PeopleIcon />
                </IconButton>
              </Tooltip>
              <Menu
                id="menu-appbar"
                anchorEl={anchorEl}
                anchorOrigin={{
                  vertical: 'top',
                  horizontal:'right',
                }}
                transformOrigin={{
                  vertical: 'top',
                  horizontal:'right',
                }}
                open={open}
                onClose={this.handleClose}
              >
                <MenuItem onClick={this.handleClose}>Profile</MenuItem>
                <MenuItem onClick={this.handleClose}>User Management</MenuItem>
                <MenuItem onClick={this.handleClose}>Logout</MenuItem>
              </Menu>
            </div>
          </Toolbar>
        </AppBar>
      </div>
    );
  }
}
export default withStyles(styles)(Header);

如何根据单击的图标分配显示哪些菜单项？我假设它应该显示直接位于所选锚点下方的菜单项。任何帮助将不胜感激！

Answer 1

检查这个工作解决方案 https://codesandbox.io/s/84xl2v8wm2 我鞭打

我所做的是将公共代码提取到一个单独的组件中，让我们称之为 MenuButton 并在多个地方使用它。因此，每个菜单按钮都有自己的范围，自己的事件处理程序等。目前，问题是您对两个不同的元素使用相同的事件处理程序，并使用相同的变量来跟踪菜单的状态。要么使用两个变量，如 open 和 open1，要么像我所做的那样将代码提取到一个单独的组件中。

父文件

<MenuButton iconType={AccountCircle} items={['Create','List1', 'List2']}/>
<MenuButton iconType={MenuIcon} items={['Profile','User Management', 'Logout']}/>

菜单按钮.js文件

import React from 'react';
import AccountCircle from 'material-ui-icons/AccountCircle';
import Menu, { MenuItem } from 'material-ui/Menu';
import IconButton from 'material-ui/IconButton';
import { withStyles } from 'material-ui/styles';
class MenuButton extends React.Component {
  state = {
    anchorEl: null
  };
  handleChange = (event, checked) => {
    this.setState({ auth: checked });
  };
  handleMenu = event => {
    this.setState({ anchorEl: event.currentTarget });
  };
  handleClose = () => {
    this.setState({ anchorEl: null });
  };
  render() {
    const { classes } = this.props;
    const { auth, anchorEl } = this.state;
    const open = Boolean(anchorEl);
    const Wrapper = this.props.iconType;
    const listItems = this.props.items.map((link) =>
      <MenuItem onClick={this.handleClose} >{link}</MenuItem>
    );
    return (
      <div>
        <IconButton
          aria-owns={open ? 'menu-appbar' : null}
          aria-haspopup="true"
          onClick={this.handleMenu}
          color="contrast"
        >
          {<Wrapper />}
        </IconButton>
        <Menu
          id="menu-appbar"
          anchorEl={anchorEl}
          anchorOrigin={{
            vertical: 'top',
            horizontal: 'right',
          }}
          transformOrigin={{
            vertical: 'top',
            horizontal: 'right',
          }}
          open={open}
          onClose={this.handleClose}
        >
        {listItems}

        </Menu>
      </div>
    );
  }
}
export default MenuButton;