Reactjs 在React.js中使用引导模式（）

我在我的react组件中使用引导模式，如下所示

<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>

让我们开始吧
&时代；
这里的尸体
提交

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

我尝试过的（以及出错的地方）：

• react的jQuery（.modal不是函数）
• react引导模式（不适用于我的版本）
• 为model创建reactRef并通过ref访问modal（）（根本不起作用）

• document.getElementById（“myModal”）.modal（“toggle”）

  （事实证明，它对virtualDOM毫无用处）
• 语义用户界面模式（当与引导一起使用时，其行为为wierd）

有没有什么方法可以通过react和bootstrap实现这一点

---

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

你可以试试我的解决方案

创建具有输入、提交、取消按钮的模态组件

---

提交此模式时，请验证其数据。如果数据有效，则触发父组件的func prop以隐藏此模式

---

“如果数据有效，则触发父组件的func属性以隐藏此模式。”这就是问题……我该如何做？您的意思是“验证数据”或“触发func”？触发父组件的func属性以“隐藏此模式”。你能给我举个小例子吗？只是触发功能嘿伙计，检查一下这个