让 React 引导组件（弹出框）自动更改位置答案

【问题标题】：Have React bootstrap component (popover) change position automatically让 React 引导组件（弹出框）自动更改位置
【发布时间】：2016-01-24 03:27:17
【问题描述】：

我目前正在使用 React Bootstrap 将 Bootstrap React 组件添加到我的应用程序中。

当用户单击按钮时，会出现一个弹出窗口，允许用户将项目添加到列表中。如下所示：

当用户在输入框中键入并按下“添加”时，它会在按钮所在的 div 中添加一行。但是，由于弹出框添加到了<body> 的最末尾，因此弹出框不会随着行数的增加而移动。如下所示：

适用的代码如下所示：

<OverlayTrigger trigger="click" placement="top" overlay={this.generatePopover()}>
  <Button bsSize="lg"> Add Income Source</Button>
</OverlayTrigger>

其中this.generatePopover() 使用<Popover> 组件。

【问题讨论】：

标签： javascript reactjs react-bootstrap

【解决方案1】：

应该这样做：

render() {
    return (
        <OverlayTrigger ref="trigger" trigger="click" placement="top" overlay={this.generatePopover()}>
            <Button bsSize="lg" onClick={this.addRow}> Add Income Source</Button>
        </OverlayTrigger>
    );
}

addRow() {
    var self = this;
    // ... your logic
    this.setState({rows: this.state.rows.concat([])}, function() {
        // when DOM is already updated
        self.refs.trigger.hide();
        self.refs.trigger.show();
    });
}

【讨论】：

【解决方案2】：

您可以将shouldUpdatePosition 添加到您的 OverlayTrigger。不幸的是，这个选项没有记录在案:(

<OverlayTrigger trigger="click" placement="top" overlay={this.generatePopover()} shouldUpdatePosition >
  <Button bsSize="lg"> Add Income Source</Button>
</OverlayTrigger>

【讨论】：

这不再是 OverylayTrigger 的道具，有更新的解决方案吗？