是否可以在Popover内部使用Dropdown而不关闭Popover？

Question

我正在尝试在下拉菜单中使用下拉菜单，但每次关闭时都会关闭。我尝试在状态上使用其他可见属性，但仍然相同。

<div>
        <Dropdown 
                visible={visibleDropdown}
                onVisibleChange={(visible)=>this.onDropdownVisibleChange(visible)}
                overlay={
                <Menu>
                  <Menu.Item key="0">
                    <a href="http://www.alipay.com/">1st menu item</a>
                  </Menu.Item>
                  <Menu.Item key="1">
                    <a href="http://www.taobao.com/">2nd menu item</a>
                  </Menu.Item>
                  <Menu.Divider />
                  <Menu.Item key="3">3d menu item</Menu.Item>
                </Menu>
              } trigger={['click']}>
                <a className="ant-dropdown-link" href="#">
                  Click me <Icon type="down" />
                </a>
              </Dropdown>
    </div>

这不起作用是我缺少什么吗？

Answer 1

我玩了一下，这是一个可行的解决方案：

http://codepen.io/JesperWe/pen/QvMNjJ

仅仅使用getPopupContainer并不能解决它，您必须稍微处理一下可见状态。查看Codepen中最重要的部分：

onVisibleChange = ( visible ) => {
    this.setState( { visible: true } )
};

closeDropdown = () => {
    this.setState( { visible: false } )
};

...

const menu = (
    <Menu onSelect={this.closeDropdown}>
        <Menu.Item>
            One
        </Menu.Item>
        <Menu.Item>
            Two
        </Menu.Item>
    </Menu>
);

return (
    <Dropdown overlay={menu} trigger={[ 'click' ]} getPopupContainer={this.getContainer}>
        <Button onClick={this.onVisibleChange}>Dropdown</Button>
    </Dropdown>
);

....

<Popover visible={this.state.visible}
     onVisibleChange={this.onVisibleChange} 
     placement="right"
     getPopupContainer={this.getContainer}
     trigger="click" content={this.renderContent()}>

    <Button icon="filter">click me</Button>

</Popover>

诀窍是onVisibleChange始终将状态设置为true，然后从Dropdown覆盖显式关闭弹出窗口。