Как предотвратить отклонение диалогового окна Material UI при нажатии на задний план?

Question

У меня есть приложение React JS, использующее компонент Dialog, и я не могу найти никакой документации о том, как можно предотвратить автоматическое закрытие диалога простым щелчком по фону. У меня есть явное действие в диалоге, которое я хочу использовать для контроля за увольнением.

Я пытался читать документы и, конечно, искать здесь, но не нашел ничего полезного или содержащего пример. Любая помощь приветствуется;это мой первый раз, когда я использую 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>

Было упомянуто, что это возможный дубликат Как обрабатывать "внешний" клик по диалогу (модальный) с помощью 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", которая, возможно, больше подходит для вашего варианта использования.