在 React.js 中使用 bootstrap modal()

Question

我在我的反应组件中使用引导模式，就像这样......

<button data-toggle="modal" data-target="#myModal">
  Let's Start
</button>
  <div id="myModal" className="modal fade" tabindex="-1" data-backdrop="static" role="dialog" >
    <div className="modal-dialog modal-dialog-centered" style={{overflowY:"initial !important"}}>
      <div class="modal-content" style={{width:"fit-content"}} >
        <div className="modal-header">
          <Header icon="add to calendar" content="Modal Header" />
          <button type="button" className="close" data-dismiss="modal">&times;</button>
        </div>
        <div className="modal-body" style={{overflowY:"auto",padding:"4em"}}>
          Body Here
        </div>
        <div className="modal-footer">
          <button onClick={this.handleClick}>Submit</button>
        </div>  
      </div>
    </div>
  </div>

模态框包含一个表单，页脚中的按钮处理提交。我想验证输入并仅在验证成功或显示错误消息时关闭模式。 如何从函数内部关闭模式？

我尝试过的（以及出了什么问题）：

• 用于反应的 jQuery（.modal 不是函数）
• react-bootstrap-modal（不适用于我的版本）
• 为 modal 创建 reactRef 并通过 ref 访问 modal()（根本不起作用）
• document.getElementById("myModal").modal("toggle")（事实证明它对 virtualDOM 没用）
• 语义 UI 模式（与引导程序一起使用时行为怪异）

有什么方法可以通过 react 和 bootstrap 来实现吗？

非常感谢您的帮助。谢谢。

Answer 1

你可以试试我的解决方案。

1. 创建一个具有输入、提交、取消按钮的模态组件。
2. 当您提交此 Modal 时，请验证其数据。如果数据有效，则触发父组件的 func prop 以隐藏此模式。