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ハンドラを持っている、あなたが持っている場合は、その後、li項目

トップレベルナビゲーションのためのonClickハンドラとしてopenMenuを使用することができますopenMenuとcloseMenuハンドラ

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

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

を作成Parentコンポーネントのメインコンテンツへのアクセス、close-on-click-outsideも処理できます（そうでない場合は、を持ち上げる必要があります）はあなたができるところまで州を示す）。スライドアウトメニューに含まれていないものは、「外部」コンテンツのクリックハンドラとしてcloseMenuを使用してください。メニューが開いているときにのみそのハンドラを設定するようにしたいと思うでしょう。これを行うには多くの方法がありますが、これは1つです：

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