When the antd sidebar menu shrinks, the secondary menu does not follow.

phenomenon

42740469-73dd58a4-88da-11e8-8838-762e173c9f22.gif

related codes

Code is antd official website custom trigger demo slightly modified 

<Layout>
            <Sider
                trigger={null}
                collapsible
                collapsed={this.state.collapsed}
            >
                <div className="logo"/>
                <Menu theme="dark"
                      openKeys={["sub2"]}
                      selectedKeys={["6"]} mode="inline">
                    <Menu.Item key="1">
                        <Icon type="pie-chart"/>
                        <span>Option 1</span>
                    </Menu.Item>
                    <Menu.Item key="2">
                        <Icon type="desktop"/>
                        <span>Option 2</span>
                    </Menu.Item>
                    <Menu.SubMenu
                        key="sub1"
                        title={<span><Icon type="user"/><span>User</span></span>}
                    >
                        <Menu.Item key="3">Tom</Menu.Item>
                        <Menu.Item key="4">Bill</Menu.Item>
                        <Menu.Item key="5">Alex</Menu.Item>
                    </Menu.SubMenu>
                    <Menu.SubMenu
                        key="sub2"
                        title={<span><Icon type="team"/><span>Team</span></span>}
                    >
                        <Menu.Item key="6">Team 1</Menu.Item>
                        <Menu.Item key="8">Team 2</Menu.Item>
                    </Menu.SubMenu>
                    <Menu.Item key="9">
                        <Icon type="file"/>
                        <span>File</span>
                    </Menu.Item>
                </Menu>
            </Sider>
            <Layout>
                <Header style={{background: "-sharpfff", padding: 0}}>
                    <Icon
                        className="trigger"
                        type={this.state.collapsed ? "menu-unfold" : "menu-fold"}
                        onClick={this.toggle}
                    />
                </Header>
                <Content style={{margin: "24px 16px", padding: 24, background: "-sharpfff", minHeight: 280}}>
                    Content
                </Content>
            </Layout>
        </Layout>

this will not happen after changing openKeys and selectedKeys to defaultOpenKeys and defaultSelectedKeys. I need to implement other functions through openKeys and selectedKeys. How to modify it?

Javascript antd react.js
Jul.08,2021

mode= {this.props.collapsed? 'vertical':' inline'} just judge what mode is based on the shrinking state

I also have the same problem. After looking at the source code of Antd Pro, I found that you can judge that when the menu is put away, Menu does not set the openKeys value, so it becomes an uncontrolled component and gives it to antd to deal with. The following screenshot of the antd pro source code, I try in my own project, can solve the problem 

rootSubmenuKeys = ['/Dashboard', '/Form', 'sub3', 'sub5', 'sub6', 'sub7', 'sub8'];

state = {
    collapsed: false,
    openKeys: this.props.location.pathname === '/' ? ['/Dashboard'] : [urlToList(this.props.location.pathname)[0]],
    oldOpenKeys: []
}

componentWillUnmount() {
    this.triggerResizeEvent.cancel();
}

@Debounce(0)
triggerResizeEvent() {
    const event = document.createEvent('HTMLEvents');
    event.initEvent('resize', true, false);
    window.dispatchEvent(event);
}

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

onOpenChange = (openKeys) => {
    const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
    if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.setState({ openKeys });
    } else {
        this.setState({
            openKeys: latestOpenKey ? [latestOpenKey] : [],
        });
    }
  }

changLang() {
    const locale = getLocale();
    if (!locale || locale === 'zh-CN') {
        setLocale('en-US');
    } else {
        setLocale('zh-CN');
    }
}

excuse me, has this problem been solved? I also have this problem, if you have solved it, please let me know, thank you!

Previous: When vuejs switches routes, the memory leaks and IE11 cannot reclaim garbage memory. Open the task manager and switch routes many times. You can see that IE browsers can occupy more than 1 GB of memory.

Next: Can ie add css3@keyframs through addRule?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e4780a-44c3a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e4780a-44c3a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?