Question

转到下面的链接，然后尝试单击按钮

它在codeandbox中运行

Answer 1

已更新：

我更喜欢执行以下操作，控制openKey而不实际在状态下修改其中的值，因此，在render方法中，请查看代码中的注释。

  render() {
    const { openKeys, collapsed } = this.state;
    // controllable openedKeys array that depends on collapsed value.
    const openedKeys = !collapsed ? openKeys : [];

    return (
      <div style={{ width: 256 }}>
        <Button
          type="primary"
          onClick={this.toggleCollapsed}
          style={{ marginBottom: 16 }}
        >
          <Icon type={this.state.collapsed ? "menu-unfold" : "menu-fold"} />
        </Button>
        <Menu
          openKeys={openedKeys} //passed the new controllable array here
          onOpenChange={this.onOpenChange}
          defaultSelectedKeys={["1"]}
          defaultOpenKeys={["sub1"]}
          mode="inline"
          theme="dark"
          inlineCollapsed={collapsed}
        >
...... rest of the code

================

您需要从状态中清除openKeys数组，它声明sub1子菜单在那里时已打开，因此，在单击按钮时，我们应清除它以关闭打开的子菜单

  toggleCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed,
      openKeys: [],
    });
  };

当然，欢迎使用StackOverflow，它是一个令人高兴的平台，拥有许多乐于助人的开发人员，他们愿意为您提供丰富的经验。

单击顶部按钮时如何解决错误

1 个答案: