reactjs sidemenu功能

Question

我有一个固定的图标导航到不同的页面的侧栏。当点击图标时，二级菜单滑出。目前，当点击一个图标时，菜单会滑出，但是当选择另一个图标时，菜单将滑回，而不仅仅是切换或停留。同时点击边栏和菜单不会关闭滑动菜单。我不知道如何让这个工作。任何建议，将不胜感激。

家长：

export default class Parent extends Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     menuOpen: false, 
 
    }; 
 
    } 
 

 
    toggleMenuOpen =() => { 
 
    this.setState({ menuOpen: !this.state.menuOpen }); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <ul> 
 
      <NavIcons onClick={this.toggleMenuOpen} /> 
 
      <PushMenu menuOpen={this.state.menuOpen} /> 
 
     </ul> 
 
     </div> 
 
    ); 
 
    } 
 
}

图标上栏：

export default class NavIcons extends Component { 
 
    render() { 
 
    const { onClick } = this.props; 
 
    return (
 
     <div> 
 
     { 
 
      topNavListItems.map((topItem) => { 
 
      return (
 
       <li className='link-wrapper' key={topItem.get('id')} onClick={onClick}> 
 
        <NavLink 
 
        activeClassName='selected' 
 
        className='Icon-list-link' 
 
        to={topItem.get('route')} 
 
        > 
 
         <Icon name={topItem.get('name')} /> 
 
        </NavLink> 
 
       </li> 
 
      ); 
 
      }) 
 
     } 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
NavIcons.propTypes = { 
 
    onClick: PropTypes.func, 
 
};

滑出菜单：

export default class PushMenu extends Component { 
 
    render() { 
 
    const { menuOpen } = this.props; 
 
    const menuClass = menuOpen ? 'menu open' : 'menu'; 
 
    return (
 
     <div className={menuClass}> 
 
     <Header>Content</Header> 
 
     <Linebreak /> 
 
     <List> 
 
      { 
 
      labelMenuItems.map((menuItem) => { 
 
       return (
 
       <li key={menuItem.get('id')}>{menuItem.get('name')} 
 
        <List> 
 
        { 
 
        menuItem.get('nestedItems').map((childMenuItem) => { 
 
         return (
 
         <li key={childMenuItem.get('id')}>{childMenuItem.get('name')}</li> 
 
        ); 
 
        }) 
 
        } 
 
       </List> 
 
       </li> 
 
      ); 
 
      }) 
 
      } 
 
     </List> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
PushMenu.propTypes = { 
 
    menuOpen: PropTypes.bool, 
 
};

Answer 1

不是有一个单一的toggleMenuOpen处理程序，创建openMenu和closeMenu处理

openMenu =() => { 
    this.setState(prevState => { 
    if (!prevState.menuOpen) { 
     return { menuOpen: true }; 
    } 
    return {}; 
    }) 
} 

closeMenu =() => { 
    this.setState(prevState => { 
    if (prevState.menuOpen) { 
     return { menuOpen: false }; 
    } 
    return {}; 
    }) 
} 

然后可以使用openMenu作为onClick处理您的顶级导航li项目

如果你有访问Parent组件中的主要内容，您还可以处理外部的关闭点击（如果没有，您需要提起menuOpen状态，你可以在哪里）。使用closeMenu作为“外部”内容上的点击处理程序 - 不管是否在滑出菜单中。您希望确保只在菜单打开时设置该处理程序。有很多方法可以做到这一点，但这是一个：

render() { 
    const handleCloseWhenOpen = this.state.menuOpen ? { onClick: this.closeMenu } : {}; 
    return (
    <div> 
     <ul> 
     <NavIcons onClick={this.toggleMenuOpen} /> 
     <PushMenu menuOpen={this.state.menuOpen} /> 
     </ul> 
     <MainContent {...handleCloseWhenOpen} /> 
    </div> 
); 
}