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

尝试一下：

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

如何防止单击背景幕后关闭“材质UI对话框”？

1 个答案: