Listen for bootstrap modal close event in reactjs

问题

is there a way I can listen for a bootstrap modal closing? In pure jQuery I would do something like:

$('#myModal').on('hidden.bs.modal', function () {
     // do something…
})

However, what would be the appropriate way to do it in react?

Thanks in advance!

回答1:

If you are using react-bootstrap's modals You can pass the handler function via onHide or onExit prop.

回答2:

the below code will give you the idea, as You can control whether the modal is shown using this.setState({showModal: true}) to achieve the equivalent of what you asked for in your post in the example below

const ControlledModalExample = React.createClass({

getInitialState(){
  return { showModal: false };
},

close(){
  this.setState({ showModal: false });
},

open(){
  this.setState({ showModal: true });
},

render() {
  return (
    <div>
      <Button onClick={this.open}>
        Launch modal
      </Button>

    <Modal show={this.state.showModal} onHide={this.close}>
      <Modal.Header closeButton>
        <Modal.Title>Modal heading</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div>Modal content here </div>
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={this.close}>Close</Button>
      </Modal.Footer>
    </Modal>
   </div>
  );
 }
});

you can get more information from the below doc url,

http://react-bootstrap.github.io/components.html#modals

来源：https://stackoverflow.com/questions/39212827/listen-for-bootstrap-modal-close-event-in-reactjs