Использование начальной загрузки () в React.js

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 не является функцией)
• response-bootstrap-modal (не работает с моими версиями)
• создание ReactionRef для модального и доступ к модальному () через ref (просто не работает)
• document.getElementById("myModal").modal("toggle") (оказывается, это бесполезно с virtualDOM)
• Semantic UI Modal (действует странно при использовании с начальной загрузкой)

Есть ли какой-нибудь способ, которым я могу добиться этого с помощью просто реакции и начальной загрузки?

Помощь очень ценится. Спасибо.

Answer 1

Можете попробовать мое решение.

1. Создание модального компонента, который имеет кнопки ввода, отправки, отмены.
2. Когда вы отправляете этот модал, проверяйте его данные. Если данные верны, запустите функцию func для родительского компонента, чтобы скрыть этот мод.