0

现象

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

相关代码

代码为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去实现其他功能,请教下该如何修改?

2018-09-18 提问
2 个回答
0

请问这个问题解决了吗?我也出现了此问题,如果你已经解决了,请赐教,谢谢!

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

撰写答案

你可能感兴趣的

推广链接