Элементы меню панели приложения не открываются правильно подменю - PullRequest
Новая
       1

Элементы меню панели приложения не открываются правильно подменю

1 голос
/ 03 июня 2019

Я создаю интерфейсное приложение с использованием React16 и библиотеки материалов UI.

Я пытаюсь построить простую навигационную панель вверху, содержащую несколько пунктов меню. Я взял пример "простого меню" с сайта material-ui.com.

Я попытался добавить второй пункт меню в панель приложения.

Однако, щелкнув по одному из пунктов меню, откроется подменю для profile-menu. Другими словами, нажатие на simple-menu открывает профиль, мою учетную запись и выход из системы, но при этом должны открываться новые, список и отчет. 

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import AccountCircle from '@material-ui/icons/AccountCircle';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import MenuIcon from '@material-ui/icons/Menu';

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
}));

function MenuAppBar() {
  const classes = useStyles();
  const [auth, setAuth] = React.useState(true);
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);

  function handleMenu(event) {
    setAnchorEl(event.currentTarget);
  }

  function handleClose() {
    setAnchorEl(null);
  }

  return (
    <div className={classes.root}>
      <AppBar color="default" position="static">
        <Toolbar>
          <Typography variant="h6" className={classes.title}>
            App
          </Typography>
          {auth && (
            <div>
              <Button
                aria-owns={anchorEl ? 'simple-menu' : undefined}
                aria-haspopup="true"
                onClick={handleMenu}
              >
                Open Menu
              </Button>
              <Menu id="simple-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
                <MenuItem onClick={handleClose}>New</MenuItem>
                <MenuItem onClick={handleClose}>List</MenuItem>
                <MenuItem onClick={handleClose}>Report</MenuItem>
              </Menu>
            </div>
          )}
          {auth && (
            <div>
              <IconButton
                aria-owns={anchorEl ? 'profile-menu' : undefined}
                aria-haspopup="true"
                onClick={handleMenu}
              >
              <AccountCircle />
              </IconButton>
              <Menu id="profile-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
                <MenuItem onClick={handleClose}>Profile</MenuItem>
                <MenuItem onClick={handleClose}>My account</MenuItem>
                <MenuItem onClick={handleClose}>Logout</MenuItem>
              </Menu>
            </div>
          )}
        </Toolbar>
      </AppBar>
    </div>
  );
}

export default MenuAppBar;

1 Ответ

1 голос
/ 03 июня 2019

Сначала вам нужно определить меню в перечислении / объекте 

const MenuTypes = Object.freeze({
    Simple: 'simple',
    Profile: 'profile'
})

Добавить еще один элемент состояния для отслеживания вашего активного меню 

const [activeMenu, setActiveMenu] = React.useState(null);

, затем обновить handleMenu, чтобы принятьТип меню и установить его в состояние.Я не могу вспомнить, если menuType будет первым или вторым аргументом, поэтому проверьте это. 

function handleMenu(menuType, event) {
  setActiveMenu(menuType);
  setAnchorEl(event.currentTarget);
}

Тогда ваши обратные вызовы кликов должны отражать правильное меню 

<Button
  aria-owns={anchorEl ? 'simple-menu' : undefined}
  aria-haspopup="true"
  onClick={handleMenu.bind(null, MenuTypes.Simple}
>

Затем вам нужно сослаться на этот тип, чтобы определить, какой из них активен в настоящее время 

open={!!activeMenu && activeMenu === MenuTypes.Simple}

Не забудьте также обновить обработчик закрытия 

function handleClose() {
  setActiveMenu(null);
  setAnchorEl(null);
}

Дайте мне знать, если что-то здесь нене имеет смысла, и я постараюсь объяснить более подробно, что смущает:)

...