5

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

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

在此处输入图像描述

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

在此处输入图像描述

适用的代码如下所示：

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

wherethis.generatePopover()使用该<Popover>组件。

4

2 回答 2

1

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

<OverlayTrigger trigger="click" placement="top" overlay={this.generatePopover()} shouldUpdatePosition >
  <Button bsSize="lg"> Add Income Source</Button>
</OverlayTrigger>
于 2017-08-08T17:19:02.607 回答
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();
    });
}
于 2016-02-26T17:20:31.580 回答