Material UI中使用onClose替代已废弃disableBackdropClick的实现方法

代码修改方案 #

onClose回调接收两个参数，第二个参数reason表示触发关闭行为的来源，可选值为backdropClick（点击背景触发）和escapeKeyDown（按下ESC键触发），你可以通过判断该参数拦截不需要的关闭逻辑。

你原有代码同时禁用了点击背景关闭和ESC键关闭，修改后的完整代码如下：

<Dialog
  open={open}
  data-testid="myTestDialog"
  onClose={(_, reason) => {
    // 仅非点击背景、非ESC触发的关闭场景才执行关闭操作
    if (reason !== 'backdropClick' && reason !== 'escapeKeyDown') {
      // 这里替换为你自己的关闭状态更新逻辑即可
      setOpen(false);
    }
  }}
>

如果你仅需要禁用点击背景关闭，保留ESC键关闭能力，调整判断条件即可：

onClose={(_, reason) => {
  if (reason !== 'backdropClick') {
    setOpen(false);
  }
}}

内容的提问来源于stack exchange，提问作者OnePiece