Я использую всплывающее окно в триггере наложения для управления подтверждением удаления. На главной странице есть список элементов, и у каждого из этих элементов есть нажимаемая кнопка X, которая запускает взаимодействие с пользователем при удалении. Затем отображается всплывающее окно, и пользователь нажимает «Подтвердить», чтобы продолжить удаление. Объект удаляется, и сборник запрашивает данные, которые должны быть в списке. Удаленного элемента больше нет в списке, но всплывающее окно остается видимым.
Мне это кажется действительно странным, потому что (насколько я могу судить) компоненты Overlay Trigger и Popover больше не упоминаются в методе any render ().
Это несколько похоже на response-bootstrap ModalTrigger doesn не скрываются, когда родительский элемент размонтирован, но, в отличие от этого сценария, в этом случае не используется свойство keys.
Соответствующие методы выглядят так ...
render() {
return (
<tr
className={this.listStyles()}
>
{this.renderListName()}
{this.renderOwner()}
<td>{this.renderLastModified()}</td>
<td>
{this.renderButtons()}
{this.renderProcessing()}
</td>
</tr>
);
},
renderOverlay() {
return (
<OverlayTrigger
trigger='click'
onEntering={this.handleDeletePopoverOpened}
onExiting={this.handleDeletePopoverClosed}
rootClose
placement='bottom'
overlay={this.renderPopover()}
>
{this.renderDeleteButton()}
</OverlayTrigger>
)
},
renderPopover() {
return (
<Popover id='delete_list' title="Confirm Delete">
<strong>Are you sure?</strong>
<ButtonGroup bsSize='small' className='deletionGroup'>
<Button bsStyle='danger' onClick={this.handleDelete}>Delete</Button>
</ButtonGroup>
</Popover>
)
},
Я пробовал явно предсказать рендеринг всплывающего окна в состоянии, а затем установить это состояние в методе componentWillUnmount так, чтобы оно скрыло всплывающее окно. Это (как и следовало ожидать) тоже не работает, несомненно, потому что код никогда не запускается, поскольку метод рендеринга (правильно) не вызывается.
Я делаю что-то неправильно? Это просто дефект в React Bootsrap? С уважением.