Question

我正在尝试在提交按钮后关闭react 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

我猜handleCloseModal从未被调用，因为您将其链接到{FAEIK}不存在的onHide事件。使用onClick事件：

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

Answer 2

我认为您需要使用onClick来调用处理程序，如果您不使用构造函数，则可以不使用此定义初始状态，并使用arrow函数将处理程序绑定为

类

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>

希望有帮助

单击提交按钮后如何关闭模型？

2 个答案: