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作为＆＃34;外部＆＃34;的点击处理程序内容 - 不在幻灯片菜单中的任何内容。您可能希望确保仅在菜单打开时设置该处理程序。有很多方法可以做到这一点，但这是一个：

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