为什么在MenuAppBar默认选择第一个菜单项

Question

在此menuAppBar中，默认情况下会选择菜单中的第一项。在这个menu中，默认情况下没有选择第一个项目，而我想要的是manuAppBar菜单中的相同内容。

Answer 1

第一个示例使用material-ui Menu component实现，第二个示例使用react-popper库中的组件实现。

在第一个示例中，第一个项目突出显示，因为它具有焦点。这是因为如果在安装或更新时打开菜单，则会设置焦点。看看the source：

class Menu extends React.Component {
  componentDidMount() {
    if (this.props.open) {
      this.focus();
    }
  }

  componentDidUpdate(prevProps) {
    if (!prevProps.open && this.props.open) {
      // Needs to refocus as when a menu is rendered into another Modal,
      // the first modal might change the focus to prevent any leak.
      this.focus();
    }
  }

如果您更喜欢react-popper并想在AppBar中使用它，您可以：

<AppBar position="static">
  <Toolbar>
    <IconButton className={classes.menuButton} color="contrast" aria-label="Menu">
      <MenuIcon />
    </IconButton>
    <Typography type="title" color="inherit" className={classes.flex}>
      Title
    </Typography>
    {auth && (
      <Manager>
        <Target>
          <IconButton
            aria-owns={open ? 'menu-list' : null}
            aria-haspopup="true"
            onClick={this.handleMenu}
            color="contrast"
          >
            <AccountCircle />
          </IconButton>
        </Target>
        <Popper
          placement="top-right"
          eventsEnabled={open}
          className={classNames({ [classes.popperClose]: !open })}
        >
          <ClickAwayListener onClickAway={this.handleClose}>
            <Grow in={open} id="menu-list" style={{ transformOrigin: '0 0 0' }}>
              <Paper>
                <MenuList role="menu">
                  <MenuItem onClick={this.handleClose}>Profile</MenuItem>
                  <MenuItem onClick={this.handleClose}>My account</MenuItem>
                  <MenuItem onClick={this.handleClose}>Logout</MenuItem>
                </MenuList>
              </Paper>
            </Grow>
          </ClickAwayListener>
        </Popper>
      </Manager>
    )}
  </Toolbar>
</AppBar>

这是你在codesandbox上引用的两个例子的混搭。它需要工作，并且仅在此处添加以说明react-popper的可能性。