Question

我在我的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>

该模式包含一个表单，并且页脚中的按钮提交。我想验证输入并仅在验证成功的情况下关闭模态，否则显示错误消息。 如何从函数内部关闭模式？

我尝试过的事情（出了什么问题）：

jQuery for react（.modal不是函数）
react-bootstrap-modal（不适用于我的版本）
为模态创建reactRef并通过ref访问modal（）（根本行不通）
document.getElementById("myModal").modal("toggle")（原来对于virtualDOM没用）
语义UI模态（与引导程序一起使用时会显得有些奇怪）

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

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

Answer 1

您可以尝试我的解决方案。

创建一个具有输入，提交，取消按钮的模态组件。
提交此模式时，请验证其数据。如果数据有效，则触发对父组件的功能道具以隐藏此模式。

在React.js中使用bootstrap modal（）

1 个答案: