单击 OverlayTrigger 时 React Bootstrap Popover 闪烁答案

【问题标题】：React Bootstrap Popover flashes when clicking OverlayTrigger单击 OverlayTrigger 时 React Bootstrap Popover 闪烁
【发布时间】：2016-12-18 14:33:30
【问题描述】：

我希望 OverlayTrigger 能够通过在按钮外部单击和单击按钮来关闭 Popover。但是，当我将触发器设置为 trigger={['click', 'focus']} 时，当我单击按钮以显示它时，弹出框会闪烁并消失。

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 属性并保持“单击”以触发触发器会起作用，但是出于我的工作要求，我不允许使用 RootClose，所以我需要一个不同的解决方案。谢谢：D

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

对于任何尝试将触发器与 OverlayTrigger 一起使用的人，请考虑改用 Overlay。

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

【讨论】：