Shadcn 对话框 X/关闭按钮未关闭对话框

Question

我在我的 React 应用程序中使用了 shadcn Dialog 组件，如下所示：

成分：

.
.
.
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogClose,
} from '@/components/ui/dialog';
.
.
.
  const [openVoiceEditModal, setOpenVoiceEditModal] = useState<boolean>(false);



  const voiceEditModal = () => {
    setOpenVoiceEditModal(true);
  };
.
.
.

          <Dialog
                        open={openVoiceEditModal}
                        onOpenChange={setOpenVoiceEditModal}
                        key={1}
                      >
                        <DialogTrigger asChild>
                          <FiEdit
                            size={18}
                            className='text-blue-600 cursor-pointer shrink-0'
                            onClick={() => voiceEditModal()}
                          />
                        </DialogTrigger>

                        <DialogContent className='p-3'>
                          <DialogHeader className='sticky top-0 z-50'>
                            <DialogTitle className='text-2xl font-bold text-center'>
                              Voice Models Selection
                            </DialogTitle>
                          </DialogHeader>
                          hi
                          <DialogClose>Close</DialogClose>
                        </DialogContent>
                      </Dialog>

为了测试关闭是否有效，我在 DialogContent 中添加了另一个按钮并触发了关闭事件。它正在工作，但不是右上角 (X) 按钮上的对话框提供的默认关闭。如果我将鼠标悬停在按钮上，它甚至不会获得光标。

我不知道为什么我在这里做错了什么。该文档也仅包含此信息。

Answer 1

我遇到了一个半类似的问题，如果我的表单（对话框内）有错误，我无法关闭对话框。

这对我有用，替换默认的对话框图标：

import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
    } from "@/components/ui/dialog"
import { RabbitIcon, XIcon } from 'lucide-react';

const DialogComponent = () => {
  const [dialogOpen, setDialogOpen] = useState(false);

  return (
    <Dialog open={dialogOpen}>
        <DialogTrigger onClick={() => setDialogOpen(true)}>
            <RabbitIcon />
        </DialogTrigger>
        <DialogContent className="[&>button]:hidden">
            <DialogClose asChild={true}>
                <XIcon className="flex flex-row justify-self-end" onClick={() => setDialogOpen(!dialogOpen)}/>
            </DialogClose>
            <DialogHeader>
                <DialogTitle>Title</DialogTitle>
                <DialogDescription>
                    Description
                </DialogDescription>
            </DialogHeader>
        </DialogContent>
    </Dialog>
  )
}