削除確認コントロールのためにOverlayトリガーでPopoverを使用しています。メインページにはアイテムのリストがあり、これらの各アイテムには、ユーザーとの削除操作を開始するクリック可能なXボタンがあります。次に、ポップオーバーが表示され、ユーザーはConfirmをクリックして削除を続行します。オブジェクトが削除され、コレクションビューはリストに含まれるデータの再クエリを行います。削除されたアイテムはリストになくなりましたが、ポップオーバーは引き続き表示されます。React Bootstrap OverlayのPopover論理親が削除されたときにトリガーが消えない
オーバーレイトリガーとポップオーバーのコンポーネントは、の render()メソッドで参照されていないため、これは私にとって本当に奇妙です。
これはreact-bootstrap ModalTrigger doesn't hide when the parent element is unmountedと多少似ていますが、このシナリオとは異なり、この場合はkeysプロパティは使用されません。
関連するメソッドは、私が明示的に状態のポップオーバーのレンダリングを叙述し、そのようにcomponentWillUnmount方法でその状態を設定しようとしました
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>
)
},
...のように見えますそれはpopoverを隠すべきです。これは、レンダリングメソッドが(正しく)呼び出されないため、コードが決して実行されないため、どちらもうまく動作しません。
何か間違っていますか?これはReact Bootsrapの欠陥ですか?敬具。