antd - 是否可以在不关闭 Popover 的情况下在 Popover 内使用 Dropdown？

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 覆盖显式关闭弹出框。