如何防止 Material UI Dialog 在单击背景时被关闭？

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 的重复项，但由于我使用的是对话框组件而不是模态组件，因此没有发现它有帮助。

Answer 1

试试这个：

<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" 来实现它，这可能更适合您的用例。