Навигация MenuItem внутри AppBar в material-ui

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

В настоящее время используется @material-ui/core версия 3.9.2.

class Header extends Component {

  handleMenuOpen = ev => {
    this.setState({ anchorAccountMenu: ev.currentTarget });
  }

  handleMenuClose = ev => {
    this.setState({ anchorAccountMenu: null });
  }

  menuGotoUrl = siteUrl => ev => {

    console.info(siteUrl);

    this.props.history.push(siteUrl);
    this.handleMenuClose(ev);
  }

  render() {
    let { classes } = this.props;
    let { anchorAccountMenu } = this.state;
    const user = UserService.currentUser();
    let userFirstChar = user.name.charAt(0).toUpperCase();

    return (<AppBar><Toolbar>     
      { /* Some more content here... */ } 
      <Button onClick = { this.handleMenuOpen }>
        <span className = { classes.nameInButton }>{ `${user.name}` }</span>
        <Avatar className = { classes.avatar }>{ userFirstChar }</Avatar>
      </Button>

      <Menu
        id = "user-menu" anchorEl = { anchorAccountMenu }
        getContentAnchorEl= { null }
        disableAutoFocusItem = { true }
        anchorOrigin = {{ vertical: "bottom", horizontal: "right" }}
        transformOrigin = {{ vertical: "top", horizontal: "right" }}
        open = { !!anchorAccountMenu } onClose = { this.handleMenuClose }>

        <MenuItem onClick = { this.menuGotoUrl("/profile/edit") }>
          <ListItemIcon className = { classes.menuIcon }>
            <Icon className = "far fa-fw fa-user" />
          </ListItemIcon>
          <ListItemText inset primary = "Profile" />
        </MenuItem>

        <MenuItem onClick = { this.handleLogout }>
          <ListItemIcon className = { classes.menuIcon }>
            <Icon className = "fas fa-fw fa-sign-out-alt" />
          </ListItemIcon>
          <ListItemText inset primary = "Logout" />
        </MenuItem>
      </Menu>
    </Toolbar></AppBar>)
  }
}

export default withRouter(withStyles(styles)(Header));

Проблема в том, что когда я выбираю элемент меню профиля, он возвращает мне ошибку, вместо того, чтобы перейти к /profile/edit через react-routes-dom и закрыть меню.

Ошибка:

react-dom.development.js:57 Uncaught Invariant Violation: Unable to find node on an unmounted component.
    at invariant (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:57:19)
    at findCurrentFiberUsingSlowPath (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4395:31)
    at findCurrentHostFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4407:27)
    at findHostInstanceWithWarning (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21470:25)
    at Object.findDOMNode (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22022:18)
    at ref (webpack-internal:///./node_modules/@material-ui/core/MenuList/MenuList.js:203:46)
...
...

Что мне здесь не хватает? Спасибо.

react-router navbar material-ui

02.03.2019 07:19

Как передать состояние или данные в react-router v6

React-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...

5 380

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я, наконец, решил это, поместив <Menu/> с <MenuList />. Не знаю, чем он отличается внутри. Это также вариант построения меню из material-ui из документа.

В частности, это то, что я делаю:

  render() {
    let { classes } = this.props;
    let { anchorAccountMenu } = this.state;
    const user = UserService.currentUser();
    let userFirstChar = user.name.charAt(0).toUpperCase();

    return (<AppBar><Toolbar>     
      { /* Some more content here... */ } 
      <Button onClick = { this.handleMenuOpen }>
        <span className = { classes.nameInButton }>{ `${user.name}` }</span>
        <Avatar className = { classes.avatar }>{ userFirstChar }</Avatar>
      </Button>

      <Popper open = { !!anchorAccountMenu } anchorEl = { anchorAccountMenu }
        transition disablePortal>{ ({ TransitionProps }) => (
        <Grow {...TransitionProps} id = "menu-item-grow"
          style = {{ transformOrigin: 'center top' }}
          ><Paper><ClickAwayListener onClickAway = { this.handleMenuClose }>
          <MenuList>

            <MenuItem onClick = { this.menuGotoUrl("/profile/edit") }>
              <ListItemIcon className = { classes.menuIcon }>
                <Icon className = "far fa-fw fa-user" />
              </ListItemIcon>
              <ListItemText inset primary = "Profile" />
            </MenuItem>

            <MenuItem onClick = { this.handleLogout }>
              <ListItemIcon className = { classes.menuIcon }>
                <Icon className = "fas fa-fw fa-sign-out-alt" />
              </ListItemIcon>
              <ListItemText inset primary = "Logout" />
            </MenuItem>

          </MenuList>
        </ClickAwayListener></Paper></Grow>
      ) }</Popper>
    </Toolbar></AppBar>)
  }
}

02.03.2019 11:06

Другие вопросы по теме

Я не могу заставить навигационную панель с липким верхом перекрываться со следующим элементом bootstrap 4

Скрыть навигацию в шапке

Проблема с выравниванием панели навигации и раскрывающимся меню в мобильном представлении

Как изменить панель навигации, когда пользователь входит и выходит?

Изменение цвета текста и фона в списке панели навигации

Как создать панель навигации, похожую на веб-сайт Angular Material 2?

Bootstrap 4 — стиль свернутой панели навигации

Свернуть навигационную панель начальной загрузки React не работает

Navbar Burger (Dropdown) толкает содержимое вниз?

Как центрировать элементы навигации? (ответственно)

Навигация MenuItem внутри AppBar в material-ui

Ответы 1

Другие вопросы по теме

Похожие вопросы