Навигация по MenuItem внутри AppBar в Material-UI - PullRequest
Новая
       13

Навигация по MenuItem внутри AppBar в Material-UI

0 голосов
/ 02 марта 2019

Я пытаюсь создать панель навигации внутри 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.log(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));

Проблема заключается в том, что, когда я выбираю профиль menuItem, он возвращает мне ошибку, вместо навигациина /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)
...
...

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

1 Ответ

0 голосов
/ 02 марта 2019

Я наконец решаю это, поместив <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>)
  }
}
...