如何防止在单击背景时关闭 Material UI 对话框？

Question

我有一个使用 Dialog 组件的 React JS 应用程序，我似乎找不到任何关于如何防止对话框被仅通过单击背景自动关闭的文档。我在对话框中有一个明确的动作，我想用它来控制解雇。

我试过阅读文档，当然也在这里搜索，但没有找到任何有用的或包含示例的内容。任何帮助表示赞赏；这是我第一次使用 React。

<Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" open={open}>
  <DialogTitle id="simple-dialog-title">Uploading Media To Server</DialogTitle>
  <React.Fragment>
    <Grid container alignItems="center" justify="center">          
        <img src={LoadingGif} width="150" />
    </Grid>
  </React.Fragment>
</Dialog>

有人提到这可能是How to handle "outside" click on Dialog (Modal) with material-ui但没有发现它有帮助，因为我使用的是 Dialog 组件而不是 Modal。

Answer 1

材料4

尝试这个：

<Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" 
  open={open} onBackdropClick="false">
   <DialogTitle id="simple-dialog-title">Uploading Media To Server</DialogTitle>
   <React.Fragment>
      <Grid container alignItems="center" justify="center">          
        <img src={LoadingGif} width="150" />
      </Grid>
   </React.Fragment>
</Dialog>

您还可以实现它的设置disableBackdropClick="true"，这可能更适合您的用例。

材料5

onBackdropClick在 Material v5 中已disableBackdropClick弃用，请改用：

   <Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" 
      open={open}>
       <DialogTitle id="simple-dialog-title">Uploading Media To Server</DialogTitle>
       <React.Fragment>
          <Grid container alignItems="center" justify="center">          
            <img src={LoadingGif} width="150" />
          </Grid>
       </React.Fragment>
    </Dialog>

并检查背景是否在onClose处理程序中被单击：

JavaScript：

<Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" 
  open={open} onBackdropClick="false">
   <DialogTitle id="simple-dialog-title">Uploading Media To Server</DialogTitle>
   <React.Fragment>
      <Grid container alignItems="center" justify="center">          
        <img src={LoadingGif} width="150" />
      </Grid>
   </React.Fragment>
</Dialog>

打字稿：

将导入添加到文件顶部：

   <Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" 
      open={open}>
       <DialogTitle id="simple-dialog-title">Uploading Media To Server</DialogTitle>
       <React.Fragment>
          <Grid container alignItems="center" justify="center">          
            <img src={LoadingGif} width="150" />
          </Grid>
       </React.Fragment>
    </Dialog>

然后添加处理程序：

const handleClose = (event, reason) => {
    if (reason && reason === "backdropClick") 
        return;
    myCloseModal();
}