当React App中的引导程序模式关闭时执行功能

Question

我有两个React组件，Button和Modal。在我的index.html文件夹中，我放置了指向boostrap的CDN及其jquery，popper和javascript脚本的链接。在我的Button组件中，我放置了put和onClick函数，它们会执行某些操作，然后弹出模式。

这是我从boostrap的文档中获取的代码：

// 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;

我的问题是模态关闭时我该怎么办？

我还创建了沙箱here

Answer 1

从Bootstrap Docs起，关闭模态时会触发以下事件：'hidden.bs.modal'和'hide.bs.modal'。第一个在触发之前等待模态完全关闭，而第二个在单击关闭模态的按钮时立即被触发。只需为其中之一设置事件处理程序即可。

文档中的jQuery示例为：

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