React Dialog默认开启后自定义按钮无法关闭的问题排查与解决

看起来你遇到的问题大概率是自定义按钮的事件绑定搞错了！让我帮你一步步排查和解决：

1. 核心错误：事件名称不匹配 #

你在自定义DialogButton组件时用了onPress作为点击事件的props，但Material-UI的Button组件在Web环境下的点击事件是onClick——onPress是React Native里的用法，Web端根本不会触发这个事件！这就导致你点击按钮时，setOpenReminder(false)完全没被执行，Dialog自然不会关闭。

修复代码： #

首先修改你的DialogButton组件，把onPress换成onClick：

export const DialogButton = ({ onClick, text }) => {
  const classes = useStyles();
  return (
    <Button onClick={onClick} className={classes.button}>
      {text}
    </Button>
  );
};

然后在调用这个组件的时候，也要把onPress改成onClick：

<DialogButton text="Ok, thanks!" onClick={() => setOpenReminder(false)} />

另外还要确认父组件里是否正确声明了状态（这是基础，别漏了）：

import { useState } from 'react';

// 父组件内部
const [openReminder, setOpenReminder] = useState(true); // 默认打开Dialog

2. 其他关闭Dialog的方法 #

除了通过按钮点击更新状态，还有几种实用的关闭方式：

• 处理外部点击和ESC键关闭：给Dialog添加onClose回调，这样用户点击Dialog外部或者按ESC键时，也能自动关闭Dialog，同时这个回调也可以用来统一处理关闭逻辑：

  <Dialog 
    open={openReminder}
    onClose={() => setOpenReminder(false)}
  >
    {/* 你的Dialog内容 */}
  </Dialog>
  

• 限制关闭方式：如果不想让用户通过ESC或外部点击关闭Dialog，可以设置disableEscapeKeyDown和disableOutsideClick为true，只保留按钮关闭的途径：

  <Dialog 
    open={openReminder}
    disableEscapeKeyDown={true}
    disableOutsideClick={true}
  >
    {/* 你的Dialog内容 */}
  </Dialog>
  

• 通过ref手动控制：虽然不如状态管理推荐，但如果你需要更直接的控制，可以用ref获取Dialog实例，手动调用关闭方法：

  import { useRef } from 'react';
  import Dialog from '@mui/material/Dialog';
  
  const dialogRef = useRef(null);
  
  const closeDialog = () => {
    dialogRef.current?.close();
  };
  
  // JSX部分
  <Dialog ref={dialogRef} open={openReminder}>
    {/* 你的Dialog内容 */}
    <DialogButton text="Ok, thanks!" onClick={closeDialog} />
  </Dialog>
  

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