Question

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

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

但是该文档显示了删除/关闭它们的唯一方法，他们使用了Jquery，如何在触发它的同时使用state或其他react方法将其关闭。对于打开它，它是有效的，因为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>

此解决方案对我有用。

我如何在不使用Jquery / Vanilla Js的情况下在Reactjs中关闭实现模型

2 个答案: