javascript - 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 组件中的主要内容，您还可以处理点击外部关闭(如果没有，则需要提升 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>
  );
}