2016-04-14 2 views
2

Ich verwende ein Popover in einem Overlay-Trigger für ein Löschbestätigungssteuerelement. Die Hauptseite hat eine Liste von Elementen und jedes dieser Elemente hat eine anklickbare X-Schaltfläche, die die Löschinteraktion mit dem Benutzer startet. Als Nächstes wird das Popover angezeigt und der Benutzer klickt auf Bestätigen, um mit dem Löschen fortzufahren. Das Objekt wird gelöscht und die Sammlungsansicht fragt erneut nach den Daten, die in der Liste enthalten sein sollen. Das Element, das gelöscht wurde, befindet sich nicht mehr in der Liste, aber das Popover bleibt sichtbar.React Bootstrap-Popover in Overlay-Trigger verschwindet nicht, wenn logische Eltern entfernt wird

Das erscheint mir wirklich seltsam, weil (soweit ich das beurteilen kann) die Overlay-Trigger- und Popover-Komponenten in keine render() -Methode mehr referenziert werden.

Dies scheint etwas ähnlich zu react-bootstrap ModalTrigger doesn't hide when the parent element is unmounted, aber im Gegensatz zu diesem Szenario gibt es keine Verwendung der Eigenschaft Schlüssel in diesem Fall.

Die entsprechenden Methoden sieht aus wie ...

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> 
 
    ) 
 
    },

Ich habe ausdrücklich versucht, auf einem Zustand der Wiedergabe des popover prädizieren und dann diesen Zustand in der componentWillUnmount Verfahren einstellen, so dass Es sollte das Popover verstecken. Dies funktioniert (wie zu erwarten) auch nicht, zweifellos, weil der Code nie ausgeführt wird, da die Rendermethode (korrekt) nicht aufgerufen wird.

Mache ich etwas falsch? Ist das nur ein Fehler in Reacts Bootsrap? Mit freundlichen Grüßen.

Antwort

1

Jahre alte Frage, so wünsche ich Ihnen :-)

eine Lösung heraus

Das gleiche Problem lebt: Ich löste es durch rootClose meine Trigger hinzufügen.

Verwandte Themen