Material ui 从嵌套材质ui对话框中转义

当我打开一个对话框，它打开另一个，我点击escape，它同时关闭两个对话框

---

有没有办法让转义只关闭最上面的对话框？

我认为这是不可能的。在对话框渲染函数中，将渲染此eventlistener，并且没有允许您覆盖此内容的道具

{打开&&
}

它调用此方法

handleKeyUp=（事件）=>{
如果（键码（事件）==“esc”）{
此.requestClose（false）；
}
};

但是，您可以深入到节点模块/material ui/Dialog/Dialog.js中，删除或更改该代码。删除此行将阻止它在esc上关闭，但将计入所有对话框。也许在此之后，您可以在自己的类中实现一个keycode事件监听器来处理模式的关闭

if（（0，_keycode2.default）（事件）==“esc”）{
_此2.请求关闭（false）；
}

编辑：可能的解决方案

我创建了两个组件，一个DialogContainer类组件和一个DialogFunctional组件。要使用它，您必须

npm安装--save react event listener

要使其正常工作，您仍然必须从节点模块中删除上述代码

当仅打开一个对话框时，单击esc将关闭该对话框。如果打开两个对话框，它将首先关闭对话框2，并保持对话框1打开

DialogContainer.js

import React，{Component}来自'React'；
从“./Dialog”导入对话框；
从“物料界面/RaisedButton”导入RaisedButton；
从“react event listener”导入EventListener；
导出默认类DialogContainer扩展组件{
状态={
openDialog1:false，
openDialog2:错误
};
HandleDialog1打开=（）=>{
this.setState（{openDialog1:true}）；
};
handleDialog2Open=（）=>{
this.setState（{openDialog2:true}）；
};
handleDialog1Close=（）=>{
this.setState（{openDialog1:false}）；
};
handleDialog2Close=（）=>{
this.setState（{openDialog2:false}）；
};
handleKeyUp=（事件）=>{
//27=esc
如果（event.keyCode===27）{
if（this.state.openDialog1&&this.state.openDialog2）{
这个.handleDialog2Close（）；
}否则{
此.handleDialog1Close（）；
这个.handleDialog2Close（）；
}
}
};
render（）{
返回(
{（this.state.openDialog1 | | this.state.openDialog2）&&
}
)
}
};

Dialog.js

从“React”导入React；
从“材料界面/对话框”导入对话框；
从“物料界面/RaisedButton”导入RaisedButton；
const DialogCustom=（{open，handleClose，number，openOtherDialog}）=>{
返回(
{`这是对话框${number}`}
{openOtherDialog&&
}
);
};
导出默认对话框自定义；

几乎总有比同时打开两个对话框/模态更好的解决方案。在我们使用MUI的材质设计应用程序中，我们有几次遇到这种情况。处理方法：打开“顶部”对话框时关闭“底部”对话框。然后（如果需要），您可以在关闭“顶部”对话框时重新打开“底部”对话框。看起来需要做很多工作，但是在代码和用户体验方面，堆叠对话框变得很棘手。

非常感谢！