點擊確認 HTML 不適用於 Sweetalert2 但它適用於本機瀏覽器確認

Question

當我使用本機確認（）時，它工作正常，但使用 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>

Answer 1

它工作得很好，你會得到一個可愛的彈出窗口，當用戶做出適當的選擇時，結果將return true 。 但是你的期望是錯誤的。

您期望confirmation返回一個真實值，但事實並非如此。 當前，您定義的confirmation方法返回undefined ，隱式返回，因為您沒有定義返回類型。

因此， Confirmation 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! 一旦打開彈出窗口，就會登錄到控制台。 原因就是我上面解釋的承諾是真實的。 一旦你點擊鏈接，promise 就會被返回，是真的，並且語句被打印到控制台，但用戶還沒有決定。

那么如何處理這個問題，你可以看到sweetalert2彈出窗口作為其樣板代碼的一部分的 Promise 鏈。 它會觸發一個事件，並且在未來的某個時間點，如果用戶進行了一個操作，那么該操作將被 Promise 鏈解決。

在最終代碼中，我們對其進行了更改，使其返回result.isConfirmed ，因此最終返回true或false ，但這是您尚未處理的場景。 你很久以前觸發的事件早就完成了它的行動，所以沒有人是更聰明的。

為了解決這個問題，您需要添加自己與承諾鏈的交互，並在代碼中添加一個then語句，如下所示：

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

這復制了早期的邏輯。 如果你檢查它，它是這樣的：

confirmation()從sweetalert創建承諾，顯示一個消息框並返回一個未解決的承諾
你將自己附加到承諾鏈的末端
用戶點擊Yes, delete it
then鏈內部確認返回你result.isConfirmed
您的按鈕內的 then 鏈被調用， confirmed是承諾鏈中前一個返回值的結果
當它被確認時，消息被打印出來

最后，您將獲得以下帶有更改的片段

 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>

¹_{在這種情況下實際上是未解析的，因為在您單擊任一按鈕之前承諾不會解析，此時它會解析}

Answer 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");
   }
 });

點擊確認 HTML 不適用於 Sweetalert2 但它適用於本機瀏覽器確認

問題描述

2 個解決方案

解決方案1
0 已采納 2020-11-09 08:22:44

解決方案2
0 2021-02-04 21:58:51

點擊確認 HTML 不適用於 Sweetalert2 但它適用於本機瀏覽器確認

問題描述

2 個解決方案

解決方案1 0 已采納 2020-11-09 08:22:44

解決方案2 0 2021-02-04 21:58:51

解決方案1
0 已采納 2020-11-09 08:22:44

解決方案2
0 2021-02-04 21:58:51