如何使用 React JSX 隐藏引导模式答案

【问题标题】：how to hide a bootstrap modal using React JSX如何使用 React JSX 隐藏引导模式
【发布时间】：2019-03-31 11:15:48
【问题描述】：

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

所以，在下面的代码中，当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;

【问题讨论】：

标签： reactjs bootstrap-4 bootstrap-modal

【解决方案1】：

你应该绑定那个方法。 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>

}

【讨论】：

但是您使用的是 ReactModal 对吗？我正在使用基本的引导程序。当它是引导模式时，有没有办法关闭它？
当你按下关闭按钮时，你必须改变状态，其中状态必须与样式或类显示：无
关闭按钮已经与引导程序 data-dismiss="modal" 一起使用。我想在回调中关闭它；即jsx方法
只需删除 data-dismiss 属性
@YasinMustafa 请查看，我确实编辑了答案

【解决方案2】：

bootstarp 有基于 jquery 的功能，所以

1.如果你在这里使用jquery，请使用这个

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

2.或者我们可以对那个按钮使用 data-dismiss="modal"

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

【讨论】：

【解决方案3】：

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

import $ from "jquery";

...

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

https://codesandbox.io/s/ykkvl7547j

【讨论】：

【解决方案4】：

另一种方法是在关闭按钮上模拟 .click()，

...
const closeRef = useRef();
...
<button
  type="button"
  className="close"
  data-dismiss="modal"
  aria-label="Close"
  ref={useRef}
>
...
<button
  type="button"
  className="btn btn-primary"
  onClick={() => {closeRef.current.click()}}
>
Save changes
</button>

【讨论】：