点击确认 HTML 不适用于 Sweetalert2，但它适用于本机浏览器确认答案

【问题标题】：Confirm on click HTML didn't work with Sweetalert2 but it's work with native browser confirm点击确认 HTML 不适用于 Sweetalert2，但它适用于本机浏览器确认
【发布时间】：2020-11-08 05:40:42
【问题描述】：

当我使用本机 confirm() 时，它工作正常，但使用 Sweetalert2 时它不起作用，任何人都可以帮忙吗？

我不知道为什么它根本不起作用。但来自 Sweetalert2 的错误

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button onclick="confirm('Sure?') && console.log('Work!')">Work fine</button>

    <button onclick="confirmation() && console.log('Work!')">Didn't work</button>


    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

    <script>
        window.confirmation = function () {
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it!',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    return true;
                }
            });
        };
    </script>
</body>

</html>

【问题讨论】：

标签： javascript sweetalert sweetalert2

【解决方案1】：

它工作得很好，你会得到一个可爱的弹出窗口，当用户做出适当的选择时，结果将return true。但你的期望是错误的。

您期望 confirmation 返回一个真实值，但它没有。目前，您定义的 confirmation 方法会隐式返回 undefined，因为您没有定义返回类型。

因此confirmation() && console.log('works')，根本不起作用，因为您正在返回undefined（这是假的）。

所以说你会改变你的confirmation 方法来返回Swal.fire 的调用？那么您当前的处理仍然无法正常工作，因为您现在返回了 Promise，这是真实的，但可能¹ 未解决。

但是，由于您需要在当前状态下处理请求的结果，这是最安全的选择，因此我们可以将 confirmation 代码更改为：

window.confirmation = function () {
  return Swal.fire({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#d33',
    cancelButtonColor: '#3085d6',
    confirmButtonText: 'Yes, delete it!',
    reverseButtons: true
  }).then( result => result.isConfirmed );
};

此时您的代码仍然无法“工作”。如果您现在单击该链接，您会看到Work! 会在您打开弹出窗口后立即登录到控制台。原因就是我上面解释的承诺是真实的。一旦您单击链接，承诺就会返回，是真实的，并且声明会打印到控制台，但用户尚未决定。

那么如何处理这个问题，你可以看到sweetalert2 弹出窗口的 Promise 链作为其样板代码的一部分。它会触发一个事件，并且在未来的某个时间点，如果用户做出了一个动作，那么这个动作就会被 Promise 链解决。

在最终代码中，我们对其进行了更改，使其返回result.isConfirmed，因此最终返回true 或false，但这是您尚未处理的场景。你很久以前触发的事件早就完成了它的行动，所以没有人比那里更聪明。

要处理这个问题，您需要添加自己与 Promise 链的交互，并在代码中添加 then 语句，如下所示：

<button onclick="confirmation().then( confirmed => confirmed && console.log('Work!') )">
  Didn't work
</button>

这复制了早期的逻辑。如果你检查它，它是这样的：

confirmation() 从 sweetalert 创建承诺，显示一个消息框并返回一个未解决的承诺
您将自己附加到承诺链的末端
用户点击Yes, delete it
then 链内确认返回您result.isConfirmed
按钮内的 then 链被调用，confirmed 是 Promise 链中前一个返回值的结果
当确认消息被打印时

所以最后，您会得到以下带有更改的 sn-p

window.confirmation = function() {
  return Swal.fire({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#d33',
    cancelButtonColor: '#3085d6',
    confirmButtonText: 'Yes, delete it!',
    reverseButtons: true
  }).then( result => result.isConfirmed );
};

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<button onclick="confirm('Sure?') && console.log('Work!')">Work fine</button>
<button onclick="confirmation().then( confirmed => confirmed && console.log('Work!') )">Didn't work</button>

¹_{在这种情况下实际上是未解决的，因为在您单击任一按钮之前，promise 不会解决，此时它会解决}

【讨论】：

感谢您的宝贵时间，这是一个包含完整细节的华丽解释。太棒了，祝你一切顺利。

【解决方案2】：

它对我有用：

Swal.fire({
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes, delete it!'
 }).then((result) => {
   if (result.value == true) {
        alert("do delete");
   } else {
        alert("do not delete");
   }
 });

【讨论】：