Material ui onClose 作为disableBackdropClick 的替代品

Question

目前我有一个对话框

  <Dialog
    open={open}
    data-testid="myTestDialog"
    disableEscapeKeyDown={true}
    disableBackdropClick={true}
  >

来自文档https://material-ui.com/api/dialog/disableBackdropClick已被弃用，应该使用onClose，但是我如何修改上面的代码以使其使用新的onClose工作，我不熟悉有了这个功能/签名

Answer 1

要使用 onClose，您的变量 open 需要可设置。当 open 为 true 时，将显示对话框，并且当调用 onClose 时，它将 open 设置为 false，但仅当它由于背景单击或转义按下而未关闭时。

例如

<Dialog
    open={open}
    data-testid="myTestDialog"
    onClose={(event, reason) => {
        if(reason !== 'backdropClick' && reason !== 'escapeKeyDown') {
            // Set 'open' to false, however you would do that with your particular code.
            setOpen(false);
        }
    }
>

Answer 2

从 MUI 4 迁移到 MUI 5 时，我必须解决类似的问题。我已经这样解决了：

      <Dialog
        open={showModal}
        disableBackdropClick
        disableEscapeKeyDown
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
        onClose={handleDlgClose}
      >
      ...

  const handleDlgClose = (event, reason) => {
    if (reason && reason == "backdropClick") {
      console.log('backdropClicked. Not closing dialog.')
      return;
    }

    setShowModal(false);
  }