Question

我正在研究具有模态的组件。一个按钮触发模态，然后，如果您单击模态内的按钮，您将被重定向到另一个页面（使用链接），并且模态应该关闭。不幸的是，如果我使用data-dismiss，重定向将不再起作用。还有另一种方法吗？这是代码，感谢您的帮助：

<div
                  className="modal fade"
                  id="exampleModal"
                  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">
                          Commande OK
                        </h5>

                        <button
                          type="button"
                          className="close"
                          data-dismiss="modal"
                          aria-label="Close"
                        >
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div className="modal-footer text-center">
                        <Link
                          to="/offers"
                          className="col-6 justify-content-center"
                        >
                          <button
                            type="button"
                            className="btn btn-info"
                          >
                           Back 
                          </button>
                        </Link>
                      </div>
                    </div>
                  </div>
                </div>

Answer 1

我建议在具有modalOpen布尔属性的组件中使用Local状态，该属性根据模式是打开还是关闭而设置为true或false。模态上的按钮还应该具有onClick处理程序，一旦单击按钮进行重定向，该处理程序会将modalOpen设置为false。

Answer 2

好的，我找到了一个解决方案：我向按钮添加了一个功能：onClick={this.closeModal} 然后只需在渲染之前添加此功能：

closeModal() {
    $("#exampleModal").modal("toggle");
  }

希望有帮助。

模态不要使用React Router和Link关闭

2 个答案: