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

phenomenon

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?

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'); } }