antd侧边栏菜单收缩时二级菜单不跟随

Question

现象

相关代码

代码为antd官网自定义触发器demo稍加改造

<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: '#fff', 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: '#fff', minHeight: 280}}>
                    Content
                </Content>
            </Layout>
        </Layout>

当将openKeys和selectedKeys改为defaultOpenKeys、defaultSelectedKeys后不会出现此现象，我需要通过openKeys和selectedKeys去实现其他功能，请教下该如何修改？

Answer 1

mode={ this.props.collapsed ? 'vertical' : 'inline'} 根据收缩状态进行判断 是什么模式就好了

Answer 2

我也有同样问题，查看了Antd Pro的源码后发现，可以通过判断菜单在收起状态时，给Menu不设置openKeys值，这样就变为不受控组件，交给antd处理。下面时截图antd pro源码，我在自己项目试了一下，时可以解决问题的

Answer 3

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

Answer 4

请问这个问题解决了吗？我也出现了此问题，如果你已经解决了，请赐教，谢谢！