reactjs sidemenu fonctionnalité

Question

J'ai une barre latérale qui est fixée avec des icônes pour naviguer vers différentes pages. lorsque vous cliquez sur les icônes, un menu secondaire est déplacé. Actuellement, lorsqu'une icône est cliquée, le menu est déplacé, mais lorsqu'une autre icône est sélectionnée, le menu revient au lieu de simplement basculer ou rester éteint. Le fait de cliquer sur la barre latérale et le menu ne ferme pas non plus le menu coulissant. Je ne suis pas sûr de savoir comment cela fonctionnera. Toute suggestion serait appréciée.

Parent:

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> 
 
    ); 
 
    } 
 
}

icônes sur la barre latérale:

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, 
 
};

diapositive menu:

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

Plutôt que d'avoir un seul gestionnaire toggleMenuOpen, créez openMenu et closeMenu gestionnaires

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

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

Vous pouvez ensuite utiliser openMenu comme gestionnaire onClick pour votre haut niveau nav li articles

Si vous avez accès au contenu principal dans le composant Parent, vous pouvez également gérer le close-on-click-outside (sinon, vous auriez besoin de hisser le menuOpen jusqu'à l'endroit où vous pouvez). Utilisez closeMenu en tant que gestionnaire de clic sur le contenu "extérieur" - ce qui ne figure pas dans le menu déroulant. Vous voudrez vous assurer de ne définir ce gestionnaire que lorsque le menu est ouvert. Il y a plusieurs façons de le faire mais ceci est un:

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> 
); 
}