Как я могу закрыть материализованный Модал в Reactjs без использования Jquery / Vanilla Js

Question

Очевидно, у меня есть Модальный , который я хочу закрыть по клику, чтобы узнать больше об этом, перейдите по этой ссылке ниже:

https://react -материализация.github.io/#/modals

Но эта документация показала единственный способ удалить его / закрыть его, они использовали Jquery, как я могу использовать state или другой подход реагирования, чтобы закрыть его, пока у меня естьвызвал это.Для его открытия это работает, потому что у Моадала есть свойство trigger, но теперь, как я могу закрыть его с помощью метода состояния / любого другого подхода React?

Ниже приведено модальное имя:

<Modal
  header='Modal Header'
  trigger={<a href='#' className={attrs.triggerClass}>{attrs.triggerText}</a>}>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
</Modal>

Я буду очень благодарен за поддержку.

Answer 1

Примечание: состояние по умолчанию - false, а setState по-прежнему остается false

  ...    
this.state = { isModalOpen: false }
...
handleCloseModal = () => {
    this.setState({ isModalOpen: false })
}
...
<Modal open={this.state.isModalOpen}>
    <p>Lorem ipsum ...</p>
    <button onClick={this.handleCloseModal}>
        Close
    </button>
</Modal>

Это решение сработало для меня.

Answer 2

Вы пробовали что-то вроде этого:

...    
this.state = { isModalOpen: true }
...
handleCloseModal = () => {
    this.setState({ isModalOpen: false })
}
...
<Modal open={this.state.isModalOpen}>
    <p>Lorem ipsum ...</p>
    <button onClick={this.handleCloseModal}>
        Close
    </button>
</Modal>