Question

我正在尝试使用popover内部的下拉菜单，但它每次都会关闭popover。我尝试在状态上使用不同的可见属性但仍然相同。

<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，然后从下拉叠加中明确关闭弹出窗口。

是否可以在没有关闭Popover的情况下在Popover中使用Dropdown？

1 个答案: