Material ui onClose 替代 disableBackdropClick

Question

目前我有一个对话框

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

来自文档 https://material-ui.com/api/dialog/ disableBackdropClick 已弃用，应该改用 onClose 但我如何修改上面的代码以使其使用新的 onClose 工作，我对此不熟悉 function/signature

Answer 1

要使用 onClick，您的变量 open 需要可设置。当 open 为 true 时显示对话框，当调用 onClick 时它设置 open 为 false 但只有当它因为背景点击而没有关闭时或逃避压力。

例如

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

Material ui onClose 替代 disableBackdropClick

Material ui onClose as replacement for disableBackdropClick

javascript

modal-dialog

reactjs

material-ui