2016-04-14 16 views
2

削除確認コントロールのために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の欠陥ですか?敬具。

答えて

1

歳の質問は、私はあなたが同じ問題が生き続け

:-)ソリューションを考え出し願っています:私は私のトリガーにrootCloseを追加することによってそれを解決しました。

関連する問題