时间戳

首页 > 解决方案 > 如何使用 React JSX 隐藏引导模式

reactjs - 如何使用 React JSX 隐藏引导模式

问题描述

我正在学习反应，我想在“发布”回调后关闭引导模式

所以，在下面的代码中，我想在回调时隐藏 'hideModal' 方法中的模式onClick={() => postDocument.callApi(this.state.document, this.hideModal)}。

我怎样才能做到这一点？

import React, { Component } from "react";
import postDocument from "./../rest/PostDocument";
import fetchPersons from "./../rest/FetchPersons";
import PersonList from "./../components/PersonList";
import ShowDatePicker from "./../components/ShowDatePicker";
import moment from "moment";

class SaveDocument extends Component {
  state = {
    persons: [],
    document: {
      documentDate: moment(),
      personFrom: {
        id: ""
      },
      personTo: {
        id: ""
      },
      comments: ""
    }
  };

  hideModal = hideModalInfo => {
    // How do I hide the modal here!
  };

  render() {
    return (
      <div
        className="modal fade"
        id="basicExampleModal"
        tabIndex="-1"
        role="dialog"
        aria-labelledby="exampleModalLabel"
        aria-hidden="true"
      >
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title" id="exampleModalLabel">
                Save document
              </h5>
              <button
                type="button"
                className="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>

            <div className="modal-footer">

              <button
                type="button"
                className="btn btn-primary"
                onClick={() => postDocument.callApi(this.state.document, this.hideModal)}
              >
                Save changes
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default SaveDocument;

标签： reactjsbootstrap-4bootstrap-modal

解决方案

您可以导入 jquery 并调用 Bootstrap 的modal("hide")方法...

import $ from "jquery";

...

hideModal = hideModalInfo => {
  $("#myModal").modal("hide");
};

https://codesandbox.io/s/ykkvl7547j

推荐阅读