如何解决Material-ui对话框:操纵Escape按钮,并在对话框外部单击鼠标
我正在使用material-ui的对话框:当用户按下“退出”按钮时,将打开一个对话框,并出现“是”或“否”按钮,询问用户是否真的要退出。
当用户单击“退出”按钮或仅单击窗口外部时,它会将他注销-就像他按了“是”一样。我该如何控制?我希望那些人激活“否”按钮。
谢谢!
解决方法
Ciao,您可以使用Mui Dialog
的“确认对话框”变体。这样,您可以强制用户在对话框中单击按钮Yes
或No
。
Here我做了一个codeandbox示例(受Mui Dialog page启发)
基本上,我使用调用Dialog的组件制作了一个简单的Button
:
return (
<div className={classes.root}>
<Button onClick={handleClickListItem}>sign out</Button>
<ConfirmationDialogRaw
classes={{
paper: classes.paper
}}
keepMounted
open={open}
onClose={handleClose}
/>
</div>
);
ConfirmationDialogRaw
组件:
function ConfirmationDialogRaw(props) {
const { onClose,open,...other } = props;
const handleCancel = () => {
// here just close the confirmation dialog
console.log("stay in");
onClose();
};
const handleOk = () => {
// here manage signout
console.log("sing out");
onClose();
};
return (
<Dialog
disableBackdropClick
disableEscapeKeyDown
maxWidth="xs"
aria-labelledby="confirmation-dialog-title"
open={open}
{...other}
>
<DialogTitle id="confirmation-dialog-title">Sing Out</DialogTitle>
<DialogContent dividers>
<Typography>Are you sure you want to exit?</Typography>
</DialogContent>
<DialogActions>
<Button autoFocus onClick={handleCancel} color="primary">
No
</Button>
<Button onClick={handleOk} color="primary">
Yes
</Button>
</DialogActions>
</Dialog>
);
}
魔术是由disableBackdropClick
组件上的道具disableEscapeKeyDown
和Dialog
完成的。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。