Question

我目前正在使用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>组件。

Answer 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();
    });
}

Answer 2

您可以将shouldUpdatePosition添加到OverlayTrigger。遗憾的是，没有记录这些选项：（

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

让React bootstrap组件（popover）自动更改位置

2 个答案: