Shadcn下拉菜单内的Dialog自动关闭问题求助

问题核心是Dialog被嵌套在DropdownMenuContent内部，点击Delete菜单项时，DropdownMenu会默认关闭并销毁Content里的所有组件，导致Dialog刚渲染就被卸载，所以只显示0.5秒就消失。

修复方案 #

把Dialog从DropdownMenuContent中移出，通过状态独立控制Dialog的显示：

• 用useState管理Dialog的打开状态
• 将Dialog组件放在DropdownMenu外部，避免被菜单关闭时销毁
• 给Delete菜单项添加点击事件，触发Dialog打开

修改后的代码 #

import { useState } from 'react';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogClose } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';

export default function EntryActions() {
  // 控制删除确认Dialog的显示状态
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);

  const handleDelete = () => {
    // 这里添加实际的删除逻辑
    console.log('执行删除操作');
    setIsDeleteDialogOpen(false);
  };

  return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger>
          <p>Trigger</p>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuLabel>Edit Entry</DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuItem onClick={() => console.log("跳转到编辑页面")}>
            Edit
          </DropdownMenuItem>
          <DropdownMenuItem onClick={() => setIsDeleteDialogOpen(true)}>
            Delete
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>

      {/* Dialog独立于DropdownMenu，不受菜单关闭影响 */}
      <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>确定要删除吗？</DialogTitle>
            <DialogDescription>
              删除该条目后无法恢复，请谨慎操作。
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="outline">取消</Button>
            </DialogClose>
            <Button onClick={handleDelete}>删除</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}

额外提示 #

原代码中有拼写错误：conosle.log应改为console.log，记得修正。

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