CODEWITHSUNDEEP
javascriptreactjsbootstrap-4bootstrap-modal
aaaaaa
aaaaaa

Reputation: 85

Perform function when bootstrap modal closes in react app

I have two react components, Button and Modal. In my index.html folder, I put link to boostrap's CDN and its jquery, popper and javascript script. In my Button component, I have put and onClick function that do something and modal will then popped up.

This is the code I took from boostrap's docs:

// App.js
import React from "react";
import "./styles.css";
import Modal from "./Modal";
import Button from "./Button";
export default function App() {
  return (
    <div className="App">
      <Button />
      <Modal />
    </div>
  );
}

// Button.js
import React, { Component } from "react";

export class Button extends Component {
  doStuff1 = e => {
    console.log("open");
    // do stuff 1, right when modal open
  };

  doStuff2 = e => {
    console.log("close");
    // do stuff 2, right when modal close
  };
  render() {
    return (
      <button
        onClick={this.doStuff1}
        type="button"
        class="btn btn-primary"
        data-toggle="modal"
        data-target=".bd-example-modal-xl"
      >
        Extra large modal
      </button>
    );
  }
}

export default Button;


// Modal.js
import React, { Component } from "react";

export class Modal extends Component {
  render() {
    return (
      <div
        class="modal fade bd-example-modal-xl"
        tabindex="-1"
        role="dialog"
        aria-labelledby="myExtraLargeModalLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog modal-xl" role="document">
          <div class="modal-content">...</div>
        </div>
      </div>
    );
  }
}

export default Modal;

My question is how do I doStuff2 when the modal close?

I have also created sandbox here

Upvotes: 0

Views: 941

Answers (1)

Yakko Majuri
Yakko Majuri

Reputation: 468

From the Bootstrap Docs, the following events fire when a modal is closed: 'hidden.bs.modal' and 'hide.bs.modal'. The first waits for the modal to fully close before triggering and the second is fired immediately when the button to close the modal is clicked. Just set up an event handler for one of them.

The jQuery example in the docs is:

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

Upvotes: 1

Related Questions