让 React bootstrap 组件（popover）自动改变位置
sir*_*ber 5 javascript reactjs react-bootstrap
我目前正在使用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>组件。
这应该可以做到：
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();
});
}
| 归档时间： |
|
| 查看次数： |
2914 次 |
| 最近记录： |