Question

我希望OverlayTrigger能够通过单击按钮外部并单击按钮来关闭Popover。但是，当我将触发器设置为触发器= {[＆＃39;点击＆＃39;，＆＃39;焦点＆＃39;]}时，当我点击按钮显示时，Popover会闪烁并消失。

getInitialState() {
    return { show: true };
},

classificationPopover() {
    return (
        <ReactBootstrap.Popover id="popover" title="Popover">
            Pop!
        </ReactBootstrap.Popover>
    );
},

render: function() {
    return (
        <div>

            <ReactBootstrap.OverlayTrigger
                trigger={['click', 'focus']}  // Here is probably the tricky part
                placement="right"
                overlay={this.classificationPopover()}>
                    <ReactBootstrap.Button
                        bsStyle="default"
                        className="btn btn-default btn-circle">
                            <div className="btn-circle-text">?</div>
                    </ReactBootstrap.Button>
            </ReactBootstrap.OverlayTrigger>

        </div>
    )
}

fiddle

当您单击按钮外部，然后单击按钮时会发生这种情况。但是，如果您只是单击按钮并使用按钮关闭弹出框，则一切正常。

我知道在OverlayTrigger中添加一个RootClose属性，只需保持＆＃34;点击＆＃34;触发器可以工作，但是对于我的工作要求，我不允许使用RootClose，所以我需要一个不同的解决方案。谢谢：D

Answer 1

对于任何试图使用OverlayTrigger触发器的人，请考虑使用Overlay。

OverlayTrigger组件非常适合大多数用例，但作为一个更高级别的抽象，它可能缺乏构建所需的灵活性更多细微差别或自定义行为到您的叠加组件中。对于在这些情况下，放弃触发器并使用叠加层会很有帮助组件直接。

单击OverlayTrigger时，React Bootstrap Popover会闪烁

1 个答案: