All geek questions in one place

Replace the reload position of the download component (popover) automatically

I am currently using React Bootstrap to add Bootstrap React components to my application.

When the user clicks a button, a popup window appears allowing the user to add an item to the list. It looks like this:

enter image description here

When the user enters the input field and clicks "Add", he adds the line to the div in which the button is located. However, since a popover is added at the very end <body>, a popover does not move as the number of lines increases. It looks like this:

enter image description here

The applicable code is as follows:

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

where this.generatePopover()uses the component <Popover>.

+4
2

:

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

shouldUpdatePosition OverlayTrigger. , : (

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

Source: https://habr.com/ru/post/1613039/

More articles:


All Articles