从下拉菜单中单击触发器时，Shadcn ui 警报对话框会自动关闭

Question

所以我知道这是其他人遇到的问题，但所有人都在同一文件中使用了警报对话框。我尝试用“”打开警报对话框，并在其中有一个带有删除的下拉菜单。

这是我尝试打开警报对话框的下拉菜单，它确实打开了，但只持续了 1 毫秒

      return (
        <DropdownMenu>
          <DropdownMenuTrigger>
            <Button variant="ghost" className="h-8 w-8 p-0">
              <span className="sr-only">Open menu</span>
              <MoreHorizontal className="h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuLabel>Actions</DropdownMenuLabel>
            <DropdownMenuItem
              onClick={() => navigator.clipboard.writeText(entry.email)}
            >
              Copy Email
            </DropdownMenuItem>
            <DropdownMenuItem
              onClick={() => navigator.clipboard.writeText(entry.phone)}
            >
              Copy Phone number
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuLabel>Manage</DropdownMenuLabel>
            <DropdownMenuItem 
              onClick={() => viewCV(entry)}
            >
              View cv
            </DropdownMenuItem>
            <DropdownMenuItem>Share cv</DropdownMenuItem>
            <DeleteAlertDialog entry={entry} />
          </DropdownMenuContent>
        </DropdownMenu>
      )

这是警报对话框

export function DeleteAlertDialog({ entry }: { entry: Entry }) {
    const router = useRouter();
    return (
      <AlertDialog>
        <AlertDialogTrigger>
          <DropdownMenuItem>
            Delete
          </DropdownMenuItem>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete the
              the data from the server.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              onClick={async() => {
                await deleteEntry(entry)
                router.refresh()
              }}
            >
              Delete
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    )
  }

Answer 1

如果您想将 AlertDialog 保存在两个不同的文件中，则一种解决方案是将它们从 DropDown 中取出。如果将对话框保留在下拉内容中，则单击时它将随下拉内容一起卸载。

Shadcn 对话框基于 radix UI 原语构建，基数警报对话框提供了一个 'open' 属性，允许您控制对话框的打开和关闭，而无需使用 'AlertDialogTrigger'。此功能对于 shadcn 组件的作用相同。 基数对话框文档

通过添加 open 属性并删除 DialogTrigger，您的 AlertDialog 组件可能看起来像这样：

export function DeleteAlertDialog({ entry, open }: { entry: Entry, open: boolean }) {
const router = useRouter();

return (
  <AlertDialog open={open}>
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
        <AlertDialogDescription>
          This action cannot be undone. This will permanently delete the
          the data from the server.
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>Cancel</AlertDialogCancel>
        <AlertDialogAction
          onClick={async() => {
            await deleteEntry(entry)
            router.refresh()
          }}
        >
          Delete
        </AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
)

}

和您的 dropDown 类似的东西（通过添加一个 dropDown 元素“删除”，并使用 onClick 处理程序更改打开状态并将其传递给 AlertDialog 组件）：

    const [open, setOpen] = useState(false);

return (
  <>
    <DropdownMenu>
      <DropdownMenuTrigger>
        <Button variant="ghost" className="h-8 w-8 p-0">
          <span className="sr-only">Open menu</span>
          <MoreHorizontal className="h-4 w-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuLabel>Actions</DropdownMenuLabel>
        <DropdownMenuItem
          onClick={() => navigator.clipboard.writeText(entry.email)}
        >
          Copy Email
        </DropdownMenuItem>
        <DropdownMenuItem
          onClick={() => navigator.clipboard.writeText(entry.phone)}
        >
          Copy Phone number
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuLabel>Manage</DropdownMenuLabel>
        <DropdownMenuItem 
          onClick={() => viewCV(entry)}
        >
          View cv
        </DropdownMenuItem>
        <DropdownMenuItem>Share cv</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setOpen(true)}>Delete</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
    <DeleteAlertDialog entry={entry} open={open}/>
  </>
)