Как закрыть модель после нажатия кнопки «Отправить»?

Question

Я пытаюсь закрыть загрузочную модель в реакции js close после отправки кнопки, но я пытался использовать код jquery, но не смог, поэтому не знаю, как закрыть после отправки кнопки. Поэтому, пожалуйста, помогите мне какзакрыть эту модель после отправки

Это делается в React.js, но мне не удалось

this.state = {

      showModal: false
    };

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

 <div
        className="modal fade"
        id="exampleModal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="exampleModalLabel"
        aria-hidden="true"
      >
        <div className="modal-dialog modal-dialog-centered" role="document">
          <div className="modal-content">
            <div className="modal-header" style={{ marginTop: "15px" }}>
              <h6 className="modal-title" id="rep">
                Raport
              </h6>
              <button
                type="button"
                className="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span
                  aria-hidden="true"
                  id="cut"
                  style={{
                    opacity: "0.7",
                    fontSize: "30px",
                    fontWeight: "normal"
                  }}
                >
                  &times;
                </span>
              </button>
            </div>
            <div className="modal-body ">
              <form onSubmit={this.props.loaddata} id="frmStudent">
                <Demo />
            <button
                type="submit"
                value="Get Data"
                className="btn btn-success active hide"
                id="button"
                onHide={this.handleCloseModal}
                style={{
                  width: "200px",
                  background: "rgba(19, 183, 96, 1.0)",
                  padding: "7px",
                  marginTop: "15px",
                  marginBottom: "15px",
                  fontWeight: "500"
                }}
              >
                Raport
              </button>
            </center>
          </form>
        </div>
      </div>
    </div>
  </div>

Answer 1

Я думаю, что вам нужно использовать onClick для вызова обработчика, и если вы не используете конструктор, вы бы определили ваше начальное состояние без использования этого, и использовали бы функцию стрелки, чтобы привязать ваш обработчик к классу как

state = {
  showModal: false
};

и используйте onClick как

<button
   type="submit"
   value="Get Data"
   className="btn btn-success active hide"
   id="button"
   onClick={() => this.handleCloseModal()}
   style={{
              width: "200px",
              background: "rgba(19, 183, 96, 1.0)",
              padding: "7px",
              marginTop: "15px",
              marginBottom: "15px",
              fontWeight: "500"
            }}
        >
          Raport
      </button>

Надеюсь, это поможет

Answer 2

Я думаю, handleCloseModal никогда не вызывается, потому что вы связали его с событием onHide, которого, AFAIK, не существует. Используйте событие onClick:

<button onClick={this.handleCloseModal}>Raport</button>