二次确认按钮如何实现？

背景

在用户点击某个按钮后弹出 AlertDialog，如果用户确认，则执行原本的点击动作；如果用户取消，则不执行该动作。这是一个很常见的模式，用于防止用户误操作。下面是相关代码：

'use client'

import { useState } from "react"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"

export default function AlertDialogWithAction() {
  const [isOpen, setIsOpen] = useState(false)
  const [actionResult, setActionResult] = useState<string | null>(null)

  // 模拟一个危险操作
  const performDangerousAction = () => {
    // 这里是实际的危险操作逻辑
    setActionResult("危险操作已执行！")
  }

  const handleConfirm = () => {
    performDangerousAction()
    setIsOpen(false)
  }

  const handleCancel = () => {
    setActionResult("操作已取消")
    setIsOpen(false)
  }

  return (
    <div className="space-y-4">
      <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
        <AlertDialogTrigger asChild>
          <Button 
            variant="destructive" 
            onClick={() => setIsOpen(true)}
          >
            执行危险操作
          </Button>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>您确定要执行此操作吗？</AlertDialogTitle>
            <AlertDialogDescription>
              此操作可能会导致不可逆的结果。请确认您真的要执行此操作。
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={handleCancel}>取消</AlertDialogCancel>
            <AlertDialogAction onClick={handleConfirm}>确认</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
      {actionResult && (
        <div className="mt-4 p-4 bg-muted rounded-md">
          <p>操作结果: {actionResult}</p>
        </div>
      )}
    </div>
  )
}

关键点

1. 我们定义了一个 performDangerousAction 函数，它代表您想要执行的实际操作。在这个例子中，它只是设置了一个结果状态，但在实际应用中，这里可能是一个 API 调用或其他重要操作。
2. 当用户点击 “执行危险操作” 按钮时，我们不直接执行操作，而是打开 AlertDialog。
3. 在 AlertDialog 中：
4. 如果用户点击 “确认”，我们调用 handleConfirm 函数，它会执行危险操作并关闭对话框。
5. 如果用户点击 “取消”，我们调用 handleCancel 函数，它会设置一个取消消息并关闭对话框。
6. 我们使用 actionResult 状态来显示操作的结果，无论是执行了还是被取消。
7. AlertDialog 的可见性由 isOpen 状态控制，这允许我们在需要时打开和关闭它。