Material-UI-React-Dialog-弹窗

Posted 2023-03-20

参考技术A React+Electron桌面应用开发文章索引

这篇文章继续之前的文章，介绍如何创建弹窗。

MaterialUI官方给出了Dialog各种实现案例 ，但都很繁琐。因为弹窗经常被使用，所以我们需要极其简单的实现。

模态弹窗必须打断用户当前流程，用户必须做出选择或操作。同时显示的模态弹窗最多1个，不能重叠。

所以，弹窗不像是一个界面元素，而更像一个全局功能，任何按钮可以直接呼叫它，让它显示出来。

弹窗分为几类：

我们把用户操作分为两类：

我们再分析打开和关闭的实现细节：

尽管内部的交互可能更加复杂，但实现很简单，因为我们可以在窗口打开时候增加一个children参数，把整个内容区填进去就可以。

我们创建Utitlies/MyDialog.js。

这里输出了一个标准元素，当它被App的render使用的时候，会创造两个全局的方法用来显示和隐藏窗口。

一个默认的状态defaultState用来初始化和清空窗口的全部设置，包含了我们上面提到的各种参数。实际上大部分默认值都写在了render()函数里面。

比起官方案例，MyDialog并不简单，但这是一劳永逸的做法，我们看一下具体使用。

首先，我们要在顶级的App.js中加载 import MyDialog from '../Utilities/MyDialog' 。

然后在render()的最后使用它，这样$showMyDialog和$hideMyDialog就被添加到global全局了：

好了，现在就绪了，我们可以在任意页面中使用，比如在HomePage.js的render()中直接使用它（因为App.js最先已经把$showMyDialog和$hideMyDialog全局化了，所以不需要再加载MyDialog模块了）：

这里我们在页面上创建了open dialog按钮。

点击按钮将打开一个弹窗。

而弹窗内我们没有使用简单的文字内容content字段，而是使用了children向弹窗内添加了一个按钮close dialog，点击它会通过自身的onClick事件关闭弹窗，同时输出HomePage的state.title，而不是MyDialog的state。

如果点击下面的确认或取消按钮，则会调用onClose方法输出true或flase，我们可以利用这个知道用户点击了哪个按钮。

END