Question

我正在使用ReactJS和bootstrap在按钮上创建一个弹出窗口。当用户在此按钮上停留2秒钟时，此弹出窗口的内容和标题必须更改。问题是在这2秒之前，弹出窗口没有标题。因此，当我更改标题和内容时，它们会在html中更改，但标题会保留其之前的“display：none”值。所以即使在html中它是正确的，我也无法在屏幕上看到它。

如果我在更改前给popover一个标题，那么一切正常。内容和标题都会更新并显示。

如何动态地将标题添加到没有标题创建的引导程序弹出窗口？

这是我的代码：

render()
{
        return (
            <span
                ref="popoverElement"
                className={"popover_helper"}
                onMouseOver={this.handleMouseOver}
                onMouseLeave={this.handleMouseLeave}
                data-container="body"
                title={this.state.title}
                data-content={this.state.content}
                data-placement={this.props.pos}
            />
        )
}

当我更新this.state.content或this.state.title的值时，我打电话给：

updatePopover()
{
    const popover =  $(this.refs.popoverElement).data('bs.popover');
    popover.options.title = this.state.title;
    $(this.refs.popoverElement).popover("show");
}

当我查看页面的html时，我获得了popover的标题：

<h3 class="popover-title" style="display: none;">my tile</h3>

Answer 1

我终于找到了使用react-bootstrap和OverlayTrigger的解决方案（它也适用于简单的叠加）：

https://react-bootstrap.github.io/components.html#popovers

将属性 shouldUpdatePosition={true}添加到叠加层非常重要。这个属性不是文档的一部分，但我在扩展研究后发现了它。这允许Popover在修改内容时正确更新其位置。

动态地将标题添加到Bootstrap popover

1 个答案: