Question

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

因此，在下面的代码中，我想在onClick={() => postDocument.callApi(this.state.document, this.hideModal)}回叫时在'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;

Answer 1

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

import $ from "jquery";

...

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

https://codesandbox.io/s/ykkvl7547j

Answer 2

您应该绑定该方法。 onClick = {this.handleClick}

class SaveDocument extends Component {

  constructor(props){
       super(props);
       state = { ... }
       //This binding is necessary to make `this` work in the callback
       this.hideModal = this.hideModal.bind(this);
  }

  render(){
     return (<button
            type="button"
            onClick={this.hideModal)}
          >)
  }

};

more info about bindings

另外，我有一个基本的示例工作：

https://codepen.io/ene_salinas/pen/yRGMpG

      ReactModal.setAppElement('#main');

      class ExampleApp extends React.Component {
        constructor () {
          super();
          this.state = {
            showModal: false
          };

          this.handleOpenModal = this.handleOpenModal.bind(this);
          this.handleCloseModal = this.handleCloseModal.bind(this);
        }

        handleOpenModal () {
          this.setState({ showModal: true });
        }

        handleCloseModal () {
          this.setState({ showModal: false });
        }

        render () {
          return (
            <div>
              <button onClick={this.handleOpenModal}>Trigger Modal</button>
              <ReactModal 
                 isOpen={this.state.showModal}
                 contentLabel="onRequestClose Example"
                 onRequestClose={this.handleCloseModal}
                 className="Modal"
                 overlayClassName="Overlay"
              >
                <p>Modal text!</p>
                <button onClick={this.handleCloseModal}>Close Modal</button>
              </ReactModal>
            </div>
          );
        }
      }

      const props = {};

      ReactDOM.render(<ExampleApp {...props} />, document.getElementById('main'))

在您的代码中（如果有jquery）：

constructor(){
   this.state = { hideModal = true }
}


hideModal() {
  this.state.hideModal = true
  //i dont recommend, i prefer use the state
   $("#modal").hide()
};

showModal() {
  this.state.hideModal = false
  //i dont recommend, i prefer use the state
  $("#modal").show()
};

render(){
   <button value="open modal" onClick={showModal} />
   //div modal
   <div class={this.state.hideModal ? 'hide' : 'show'}>
      <button value="close modal" onClick={hideModal} /> 
   </div>

}

Answer 3

bootstarp具有基于jquery的功能，因此

1。如果您在此处使用jquery，请使用

$("#basicExampleModal").modal("hide");

2。或者我们可以对该按钮使用 data-dismiss =“ modal”

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

如何使用React JSX隐藏引导程序模态

3 个答案: