javascript - 单击相同的项目会关闭菜单，但不同的项目会保持菜单打开

Question

我已经构建了一个带有图标的侧面菜单，单击每个图标后，菜单会滑出，上面有相应的项目。通过使用

const handleCloseWhenOpen = menuOpen ? { onClick: this.closeMenu } : null;

然后放入

{...handleCloseWhenOpen}

作为一个 Prop ...这使得当我单击 icon1 时菜单打开，当再次单击 icon1 时菜单关闭。如果我单击 icon1，菜单将打开，然后单击 icon2，菜单将关闭，而不仅仅是切换菜单数据，我必须再次单击 icon2 以获取带有 icon2 数据的菜单。我只想在再次单击单击打开菜单的相同图标时关闭菜单。

任何帮助都会很棒。

export default class SidebarNav extends Component {
  static propTypes = {
    children: PropTypes.any,
  };
  constructor() {
    super();
    this.state = {
      menuOpen: false,
      sideBarItems: new List(),
      isSelected: false,
    };
  }

  openMenu = (value) => {
    let menuData = [];
    switch (value) {
      case 'icon1':
        menuData = Data.icon1Data;
        break;
      case 'icon2':
        menuData = Data.icon2Data;
    }
    this.setState({
      menuOpen: true,
      sideBarItems: menuData,
      selectedIcon: value,
    });
  }

  closeMenu = (value) => {
    this.setState({
      menuOpen: false,
      selectedIcon: value,
    });
  }

  render() {
    const {
            menuOpen,
            sideBarItems,
            selectedIcon,
          } = this.state;
    const { children } = this.props;
    const handleCloseWhenOpen = menuOpen ? { onClick: this.closeMenu } : null;
    return (
    <PageWrapper>
      <SideNav
        onClick={this.openMenu}
        selectedIcon={selectedIcon}
      />
      <PageContentWrapper>
        <Sidebar.Pushable as={Segment}>
          <PushMenu
            visible={menuOpen}
            sideBarItems={sideBarItems}
            {...handleCloseWhenOpen}
          />
          <Sidebar.Pusher {...handleCloseWhenOpen}>
            {children}
          </Sidebar.Pusher>
        </Sidebar.Pushable>
      </PageContentWrapper>
    </PageWrapper>
    );
  }
}

export default class SideNav extends Component {
  static propTypes = {
    onClick: PropTypes.func,
    selectedIcon: PropTypes.any,
  }
  render() {
    const {
            onClick,
            selectedIcon,
          } = this.props;
    return (
    <SideBarDiv>
        <IconList>
        {
          Data.icon1Data.map((item, itemIndex) => {
            return (
              <IconWrapper
                key={itemIndex}
                className={
                selectedIcon === item.get('value')
                ? 'Icon-pressed-shadow'
                : 'Icon-right-shadow'
                }
                onClick={() => onClick(item.get('value'))}
              >
                  <ListItem>
                    <Icon name={item.get('name')} />
                      </ListItem>
              </IconWrapper>
            );
          })
        }
        {
          Data.icon2Data.map((item, itemIndex) => {
            return (
              <IconWrapper
                key={itemIndex}
                className={
                selectedIcon === item.get('value')
                ? 'Icon-pressed-shadow'
                : 'Icon-right-shadow'
                }
                onClick={() => onClick(item.get('value'))}
              >
                <ListItem>
                  <Icon name={item.get('name')} />
                  <NotificationLabel>3</NotificationLabel>
                </ListItem>
              </IconWrapper>
            );
          })
        }
      </IconList>
    </SideBarDiv>
    );
  }
}

export default class PushMenu extends Component {
  constructor() {
    super();
    this.state = {
      visible: false,
    };
  }
  static propTypes = {
    visible: PropTypes.bool,
    sideBarItems: PropTypes.instanceOf(Immutable.List),
  }
  render() {
    const {
            sideBarItems,
            visible,
          } = this.props;
    return (
      <Sidebar
        className='Push-menu'
        animation='push'
        width='thin'
        visible={visible}
      >
      <div>
          {
            sideBarItems ? sideBarItems.map((menuTitle, menuTitleIndex) => {
              return (
                <div key={menuTitleIndex}>
                <Header>{menuTitle.get('title')}</Header>
                <Linebreak />
              </div>
              );
            })
            : <Header>Content</Header>
          }
        </div>
        <List>
          {
            sideBarItems ? sideBarItems.map((menuItem, menuItemindex) => {
              return (
                <li key={menuItemindex}>
                    {
                    !!menuItem.get('childItems') &&
                    menuItem.get('childItems').map((childItem) => {
                      return (
                        <div key={childItem.get('name')}>
                          <ListItemHeader>{childItem.get('name')}</ListItemHeader>
                          <List>
                            {
                              childItem.get('nestedItems').map((nestedItem) => {
                                return (
                                  <ListLink key={nestedItem.get('name')}>
                                    <Link
                                      activeStyle={{ fontWeight: 'bold' }}
                                      to={nestedItem.get('route')}
                                    >
                                      <li>{nestedItem.get('name')}</li>
                                    </Link>
                                </ListLink>
                                  );
                              })
                            }
                          </List>
                        </div>
                      );
                    })
                  }
                </li>
              );
            })
            : null
          }
        </List>
          </Sidebar>
    );
  }
}

Answer 1

SidebarNav 中的状态有一个 menuOpen 字段，用于跟踪任何菜单是否打开。这是运行 handleCloseWhenOpen 时检查的内容。因此，当您单击 Icon1 时，menuOpen 设置为 true。接下来，当您单击 Icon2 时，会检查 menuOpen 并发现其为 true 并切换为 false。因此，单击 Icon2 将关闭 Icon1 的菜单，而不是打开 Icon2 的菜单。

要纠正此行为，您需要做的是分别跟踪每个图标菜单的状态。因此，如果您想跟踪 SidebarNav 中的状态，您可以在每个图标的状态对象中拥有一个字段，例如

this.state={
    .....
    menu1Open:false,
    menu2Open:false,
    .....
}

然后根据单击的图标检查需要切换的字段；并相应地呈现菜单。

如果您认为这会变得复杂，您可以让每个 SideNav 跟踪自己的状态，将菜单数据作为 Prop 传递给图标，并让单击操作切换菜单的打开和关闭。