时间戳

首页 > 解决方案 > Material-ui Dialog：在对话框外操作 Escape 按钮和鼠标点击

javascript - Material-ui Dialog：在对话框外操作 Escape 按钮和鼠标点击

问题描述

我正在使用 material-ui 的对话框：当用户按下“退出”按钮时，会打开一个对话框并出现“是”或“否”按钮，询问用户是否真的想要退出。

当用户单击“退出”按钮或只是在窗口外单击时，它会将他退出 - 就好像他按下“是”一样。我该如何控制这个？我希望那些激活“否”按钮。

谢谢！

标签： javascriptreactjsdialogmaterial-ui

解决方案

Ciao，您可以使用 Mui 的 Confirmation Dialog 变体Dialog。通过这种方式，您可以强制用户单击按钮Yes或No在您的对话框中。

这里我做了一个codesandbox的例子（灵感来自Mui Dialog page）

基本上我用一个Button调用Dialog的组件做了一个简单的：

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

推荐阅读