Exit modal durch Klicken auf Hintergrund Inhalt in React

Question

Ich benutze React-Bootstrap (Dokumentation:) und bin mir nicht sicher, wie ich ein Modal durch Klicken auf den Hintergrund schließen kann.

Derzeit bin ich schließen es durch (Sie die Funktion nichts dagegen onCloseModal - es schließt so ziemlich das modal):

<Modal closeButton={true} onHide={this.onCloseModal.bind(this)}> 
    <Modal.Header closeButton={true} onHide={this.onCloseModal.bind(this)}> 
    </Modal.Header> 
</Modal> 

Es gibt keine Dokumentation, wie durch einen Klick auf den Hintergrund zu schließen. Es tut mir leid, dass ich nicht wirklich etwas versucht habe, aber ich habe überall auf Stackoverflow nachgesehen und alle Lösungen entsprechen jQuery, nicht React.

Answer 1

Es tut, hat in der Dokumentation in props Abschnitt namens backdrop

Wenn Sie mit Bootstrap vertraut, das Attribut vielleicht wissen, Show zu beschreiben/Ausblenden der modal, während sie in der Aktion Hintergrund klicken static backdrop genannt wird.

So schließen Sie ein Modal durch Klicken auf den Hintergrund. Probieren Sie den folgenden Code aus.

<Modal {...this.props} backdrop="true"> 
    <Modal.Header closeButton> 
     <Modal.Title id="contained-modal-title-sm">Modal heading</Modal.Title> 
    </Modal.Header> 
    <Modal.Body> 
     <h4>Wrapped Text</h4>   
    </Modal.Body> 
    <Modal.Footer> 
     <Button onClick={this.props.onHide}>Close</Button> 
    </Modal.Footer> 
</Modal> 

Beachten Sie, dass ...this.props ist JSX Spread Attributes