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);
        }
    }
>