如何在不使用 Jquery/Vanilla Js 的情况下关闭 Reactjs 中的实例化模态

Question

显然，我有一个模态，我想在单击时关闭它，要了解更多信息，请访问下面的链接：

https://react-materialize.github.io/#/modals

但是这个文档显示了删除它/关闭它的唯一方法，他们使用 Jquery，我如何使用state或其他反应方法来在我触发它时关闭它。为了打开它，它之所以有效，是因为 Moadal 具有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

你有没有试过这样的事情：

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

Answer 2

注意：默认状态为 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>

这个解决方案对我有用。