问题描述
当我使用本机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
,这是事实,但有可能 1 未解决。
但是,由于您需要在当前状态下处理请求的结果,因此这是最安全的选择,因此我们可以将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>
1 在这种情况下实际上无法解决,因为承诺直到您单击两个按钮中的任何一个都无法解决时,承诺才能解决
,它对我有用:
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");
}
});