Öffnen Sie nur einen React-Bootstrap Popover zu einer Zeit

Question

Ich benutze React-Bootstrap Popover und ich frage mich, ob es eine eingebaute Eigenschaft gibt, die ich entweder zu Popover selbst oder zu OverlayTrigger hinzufügen kann, so dass nur ein Popover angezeigt wird Zeit.

Answer 1

Sie können versuchen rootClose Requisiten, die onHide auslösen, wenn der Benutzer außerhalb der Überlagerung klickt. Bitte beachten Sie, dass in diesem Fall onHide obligatorisch ist. z.B.:

const Example = React.createClass({ 
    getInitialState() { 
    return { show: true }; 
    }, 

    toggle() { 
    this.setState({ show: !this.state.show }); 
    }, 

    render() { 
    return (
     <div style={{ height: 100, position: 'relative' }}> 
     <Button ref="target" onClick={this.toggle}> 
      I am an Overlay target 
     </Button> 

     <Overlay 
      show={this.state.show} 
      onHide={() => this.setState({ show: false })} 
      placement="right" 
      container={this} 
      target={() => ReactDOM.findDOMNode(this.refs.target)} 
      rootClose 
     > 
      <CustomPopover /> 
     </Overlay> 
     </div> 
    ); 
    }, 
});