实现 Material UI 对话框

【问题标题】：Implementing Material UI Dialog box实现 Material UI 对话框
【发布时间】：2018-08-14 03:24:24
【问题描述】：

在 Material UI 文档中，Dialog 的实现是借助 Button 的 onClick 实现的。但是使用组件的render方法中的if-else条件可以出现Dialog吗？就像在登录表单中一样，如果凭据正确，则转到下一个组件，如果不正确，则应该使用我从 redux 商店获得的道具上的 if-else 条件出现一个弹出对话框。

提前感谢您的帮助。

【问题讨论】：

标签： reactjs redux material-ui

【解决方案1】：

您需要在 if-else 条件中调用按钮单击事件。

我在 stackblitz 上创建了应用程序 Click here

在这里您可以在 demo.js 中查看我如何设置值并使用 if-else 条件打开对话框。

【讨论】：

【解决方案2】：

对话框的可见性由状态值控制。因此，无论何时何地，您将该状态值设置为 true，或者，从 Prasad Phule 的以下代码中，

   <Dialog
      open={this.state.open}
      onClose={this.handleClose}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >

当状态值this.state.open提供给<Dialog>的open属性时，无论是onClick函数还是if条件都会显示对话框。

【讨论】：