javascript - Material-ui 对话框 : manipulating the Escape button and mouse clicking outside of the dialog

Question

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

当用户单击“退出”按钮或仅单击窗口外部时，系统会将其注销 - 就像按"is"一样。我怎样才能控制这个？我希望他们激活“否”按钮。

谢谢!

Answer 1

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

Here我制作了一个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>
  );
}

魔法是由 Prop 完成的 disableBackdropClick和disableEscapeKeyDown上Dialog组件。