-如何同时关闭两个对话框
-如何同时关闭两个对话框
提问于 2019-09-17 14:55:16
我有一个嵌套的弹出对话框组件(来自materials )，其中包括两个对话框，每个对话框都维护状态' open '，这个状态用于确定是否打开了dislog窗口。当我关闭顶部对话框时，是否可以同时关闭这两个状态，该对话框需要将两个状态设置为'false‘。
组成结构：
-Dialog1
-Dialog2为他们述明：
Dialog1: { open: true }
Dialog2: { open: true }当我更改Dialog1的状态时，也可以设置Dialog2的状态吗？有人能帮忙吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-09-17 15:13:36
有实现这一目标的方法，但这取决于您希望如何实现它或是否有意义。
由于没有提供特定的代码，因此将提供一些可以考虑的方法。
- 爬行状态。
- 通过回调通知家长
- 上下文API
1.提升状态
您可以简单地将对话框1&2的状态移动到父组件。
function Parent() {
const [dialogStates, setDialogStates] = useState({
isDialog1Open: false,
isDialog2Open: false
});
...
}2.通过回调通知家长
您可以在调用子对话框时提供要调用的函数。
查看下面类似于代码片段的类伪代码。
function ParentDialog() {
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [isChildDialogOpen, setIsChildDialogOpen] = useState(false);
return (
<Dialog isOpen={isDialogOpen}>
<ChildDialog onCancel={() => setIsDialogOpen(false)} />
</Dialog>
);
}
function ChildDialog({ onCancel }) {
return <Dialog onCancelClick={onCancel}>...</Dialog>;
}3.上下文API
您可以使用分派通知子级的父级关闭。
这是实现这一目标的途径之一。(您可以使用这个职位使上下文API更可共享)。
const DialogStateContext = createContext();
const DialogActionContext = createContext();
function dialogReducer(state, action) {
... toggle dialog states here...
}
function DialogContainer({children}) {
const [state, dispatch] = useReducer(dialogReducer, initialState)
return (
<DialogStateContext.Provider value={state}>
<DialogActionContext.Provider value={dispatch}>
{children}
</DialogActionContext.Provider>
</DialogStateContext.Provider>
);
}
function ParentDialog() {
const state = useContext(DialogStateContext)
return (
<Dialog isOpen={state.isParentDialogOpen}>
<ChildDialog onCancel={() => setIsDialogOpen(false)} />
</Dialog>
);
}
function ChildDialog({ onCancel }) {
const dispatch = useContext(DialogActionContext)
return <Dialog onCancelClick={() => dispatch({type: 'close parent dialog'})}>...</Dialog>;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57976983
复制相关文章
相似问题
腾讯云开发者
