reactjs 侧边菜单功能

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 作为顶级导航 li 项的 onClick 处理程序

如果你可以访问Parent组件中的主要内容，你也可以处理close-on-click-outside（如果没有，你需要提升menuOpen状态到你可以的地方）。使用 closeMenu 作为 "outside" 内容的点击处理程序 - 无论滑出式菜单中没有什么内容。您需要确保仅在菜单打开时设置该处理程序。有很多方法可以做到这一点，但这是一种方法：

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

reactjs 侧边菜单功能

reactjs sidemenu functionality

javascript

state

sidebar

reactjs