使用shadcn Dialog的open prop时，如何保留X/Close按钮功能？

当你通过open prop控制Dialog显隐（受控模式）时，默认的右上角关闭按钮不会自动触发状态更新——因为此时Dialog的显隐完全由你传入的open状态决定，必须手动为关闭按钮绑定状态修改逻辑。

具体实现方案 #

• 用useState管理Dialog的显隐状态
• 给默认的<DialogClose>组件添加onClick事件，手动将状态设为false
• 异步操作完成后，同样通过修改状态来关闭Dialog

示例代码：

import { useState } from 'react'
import { Dialog, DialogContent, DialogClose, DialogHeader, DialogTitle } from '@/components/ui/dialog'

function MyDialog() {
  const [isOpen, setIsOpen] = useState(false)

  // 模拟异步操作
  const handleAsyncAction = async () => {
    try {
      // 执行你的异步逻辑（比如接口请求）
      await new Promise(resolve => setTimeout(resolve, 1000))
      // 异步完成后关闭Dialog
      setIsOpen(false)
    } catch (err) {
      console.error(err)
    }
  }

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <button onClick={() => setIsOpen(true)}>打开弹窗</button>
      
      <DialogContent>
        <DialogHeader>
          <DialogTitle>弹窗标题</DialogTitle>
          {/* 手动绑定关闭逻辑 */}
          <DialogClose onClick={() => setIsOpen(false)} />
        </DialogHeader>
        <button onClick={handleAsyncAction}>执行异步操作</button>
      </DialogContent>
    </Dialog>
  )
}

补充说明 #

也可以直接复用Dialog的onOpenChange回调简化代码，把DialogClose的点击事件改为() => onOpenChange(false)，效果完全一致。受控模式下，点击遮罩、按ESC键等默认关闭操作也会触发onOpenChange，依赖这个回调就能统一管理所有关闭逻辑。

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