在反应应用程序中关闭引导模式时执行功能答案

【问题标题】：Perform function when bootstrap modal closes in react app在反应应用程序中关闭引导模式时执行功能
【发布时间】：2020-08-25 08:48:32
【问题描述】：

我有两个 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

【问题讨论】：

你正在混合 react 和 jquery。可不是什么好事。 React 在状态变化时重新渲染，jQuery 直接修改 dom。因此，在重新渲染期间，您最终可能会丢失 jQuery 所做的更改。这会导致不希望的效果。用完一些包装引导程序的库。或者尝试使用其他一些基于反应的模式。这是最好的方法，而不是尝试解决这个问题。从长远来看，这会给您带来意想不到的问题。

标签： javascript reactjs bootstrap-4 bootstrap-modal

【解决方案1】：

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

文档中的 jQuery 示例是：

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

【讨论】：