MenuAppBar에서 기본적으로 첫 번째 메뉴 항목이 선택되는 이유

Question

이 menuAppBar에서 메뉴의 첫 번째 항목이 기본적으로 선택됩니다. 이 부분에서 menu은 첫 번째 항목이 기본적으로 선택되어 있지 않으며 원하는 항목은 manuAppBar 메뉴에도 동일합니다.

Answer 1

첫 번째 예제는 material-ui Menu component으로 구현되고 두 번째 예제는 react-popper 라이브러리의 구성 요소를 사용하여 구현됩니다.

첫 번째 예에서는 첫 번째 항목에 포커스가 있으므로 강조 표시되어 있습니다. 이는 메뉴가 마운트되거나 업데이트 될 때 열리면 Menu가 포커스를 설정하기 때문입니다. 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(); 
    } 
    } 

당신이 반응-포퍼를 선호하고 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에 인용 된 사례 그것은 일을 필요로하며 반응 포퍼를 가능성을 설명하기 위해 여기에 추가되었습니다.