javascript - 锁定/防止关闭菜单reactjs

Question

我有一个侧面菜单，单击图标时打开，单击页面或单击菜单上的项目时关闭。我正在尝试实现锁定，因此当单击锁定图标时，即使您单击菜单项或页面，菜单也不会关闭。

我能够将图标从锁定图标更改为解锁图标，但我在停止关闭功能方面遇到问题。任何帮助/建议都会很棒。下面是 2 个组件(父组件和带有锁定按钮的菜单)，这是完整外观的代码沙箱:https://codesandbox.io/s/pw6q46jp20

class SideBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      category: props.category,
      currentPage: {
        backgroundColor: '#383838',
        color: '#A9A9A9',
      },
      menuLocked: false,
      menuOpen: false,
      selectedIcon: null,
    };
  }
  handleIconClick = (category) => {
    this.setState({
      category,
      menuOpen: true,
      selectedIcon: category,
    });
  };
  handleMenuItemClick = (category) => {
    this.setState({
      menuOpen: false,
      selectedIcon: '',
      currentPage: category,
    });
  }
  handlePageClick = () => {
    this.setState({
      menuOpen: false,
    });
  }
  handleMenuLock = () => {
    this.setState({ menuLocked: !this.state.menuLocked });
  }
  render() {
    return (
      <div>
        <TopBar {...this.props} />
        <Container>
          <SideNav>
            <ListWrapper>
              <IconList
                currentPage={this.state.currentPage}
                openMenu={this.handleIconClick}
                selectedIcon={this.state.selectedIcon}
                visible={this.state.menuOpen}
              />
            </ListWrapper>
          </SideNav>
          <PageContentWrapper>
            <Sidebar.Pushable>
              <PushMenu
                category={this.state.category}
                closeOnItemClick={this.handleMenuItemClick}
                handleMenuLock={this.handleMenuLock}
                menuLocked={this.state.menuLocked}
                params={this.props.params}
                visible={this.state.menuOpen}
              />
              <Sidebar.Pusher
                onClick={this.handlePageClick}>
                <Segment basic>
                  {this.props.children || <Home />}
                </Segment>
              </Sidebar.Pusher>
            </Sidebar.Pushable>
          </PageContentWrapper>
        </Container>
      </div>
    );
  }
}

SideBar.propTypes = {
  children: PropTypes.any,
  params: PropTypes.any,
  category: PropTypes.any,
};

export default SideBar;

class PushMenu extends React.Component {
  render() {
    const category = sideNavData.lookupCategory(this.props.category);
    const menuLockButton = !this.props.menuLocked
      ? <Icon
        link={true}
        name='unlock'
        size='big'
      />
      : <Icon
        link={true}
        name='lock'
        size='big'
      />;
    return (
      <Sidebar
        className='Push-menu'
        animation='push'
        width='thin'
        visible={this.props.visible}
      >
        <Header>{this.props.category}</Header>
        <Linebreak />
        {
          Object.keys(category).map((subCategory, index) => {
            return (
              <div key={index}>
                <SubcategoryHeader>{subCategory}</SubcategoryHeader>
                <List>
                  {
                    Object.keys(category[subCategory]).map((item, index) => (
                      <li key={index}>
                        <ListLink>
                          <Link
                            to={`/${this.props.category}/${subCategory}/${category[subCategory][item].name}`}
                            activeStyle={{ color: '#FFFFFF' }}
                            onClick={() => {
                              this.props.closeOnItemClick(this.props.category);
                            }}
                          >
                            {category[subCategory][item].name}
                          </Link>
                        </ListLink>
                      </li>
                    ))
                  }
                </List>
                <LockButtonWrapper onClick={this.props.handleMenuLock}>
                  {menuLockButton}
                </LockButtonWrapper>
              </div>
            );
          })
        }
      </Sidebar>
    );
  }
}

PushMenu.propTypes = {
  category: PropTypes.any,
  closeOnItemClick: PropTypes.func,
  currentPage: PropTypes.func,
  handleMenuLock: PropTypes.func,
  menuLocked: PropTypes.bool,
  visible: PropTypes.bool,
};

export default PushMenu;

Answer 1

在handlePageClick()内部，您应该检查this.state.menuLocked是否为true。如果是这样，请不要更改 state 中 menuOpen 的值。

handlePageClick = () => {
  if (!this.state.menuLocked) {
    this.setState({
      menuOpen: false,
    });
  }
}

顺便说一句，在 handleMenuLock() 中，您使用 menuLocked 的先前值来设置新值。由于 setState 是异步的，因此 menuLocked 的值在实际保存时完全有可能发生变化，因此您可能无法获得所需的结果。因此，您应该向它传递一个像这样的函数:

handleMenuLock = () => {
  this.setState((prevState) => ({ menuLocked: !prevState.menuLocked }))
}

这确保了该值确实被切换。有关以这种方式使用 setState 的文档可以在 here 找到。 .