单击时确认HTML不适用于Sweetalert2，但适用于本机浏览器确认

如何解决单击时确认HTML不适用于Sweetalert2，但适用于本机浏览器确认

当我使用本机Confirm（）时，它可以正常工作，但是使用Sweeetalert2时，它不能正常工作吗？

我不知道为什么它根本没有用。但是这里是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>

解决方法

它工作得很好，您会看到一个漂亮的弹出窗口，当用户做出适当的选择时，结果将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链。它会触发一个事件，并且在将来的某个时刻，如果用户执行了一项操作，则该请求将由承诺链解决。

在最终代码中，我们对其进行了更改，使其返回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
然后调用按钮内的链，confirmed是promise链中前一个返回值的结果
当确认消息被打印时

最后，您将获得以下带有更改的代码段

window.confirmation = function() {
  return Swal.fire({
    title: 'Are you sure?',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>

¹_{在这种情况下实际上无法解决，因为承诺直到您单击两个按钮中的任何一个都无法解决时，承诺才能解决}

它对我有用：

Swal.fire({
      title: 'Are you sure?',confirmButtonColor: '#3085d6',cancelButtonColor: '#d33',delete it!'
 }).then((result) => {
   if (result.value == true) {
        alert("do delete");
   } else {
        alert("do not delete");
   }
 });

单击时确认HTML不适用于Sweetalert2，但适用于本机浏览器确认

如何解决单击时确认HTML不适用于Sweetalert2，但适用于本机浏览器确认

解决方法

相关推荐