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