当 bootstrap 模态在 React 应用程序中关闭时执行功能

Question

我有两个 React 组件，Button 和 Modal。在我的 index.html 文件夹中，我将 link 放入 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;

我的问题是当模态关闭时我该如何做Stuff2？

我也创建了沙盒here

Answer 1

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

文档中的 jQuery 示例是：

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

当 bootstrap 模态在 React 应用程序中关闭时执行功能

Perform function when bootstrap modal closes in react app

javascript

bootstrap-modal

reactjs

bootstrap-4