javascript - 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，但仅当它因背景点击或 escape 按下而未关闭时才如此。open p>

例如

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