javascript - 注销 OnClientClick 不适用于 Sweetalert

Question

Sweeetalert 不像确认框那样工作，它不等待回调函数

当我点击注销时，它会注销而不等待 sweetalert yes no 确认

<asp:Button runat="server" ID="btnUserlogout" Text="Logout" 
                               OnClick="btnUserlogout_Click"
                               OnClientClick="return UserDeleteConfirmation();"  />


function UserDeleteConfirmation() {
           return  swal({
            title: "Are you sure to Logout? ",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: '#DD6B55',
            confirmButtonText: 'Yes, I am sure!',
            cancelButtonText: "No, cancel it!",
            closeOnConfirm: false,
            closeOnCancel: false
        });
}

我也尝试过这个代码

function UserlogoutConfirmation() {
        // return confirm("Are you sure you want to logout?");
       return  swal({
            title: "Are you sure to submit Project? ",
            text: " Once submitted, You will not be able to make any change!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: '#DD6B55',
            confirmButtonText: 'Yes, I am sure!',
            cancelButtonText: "No, cancel it!",
            closeOnConfirm: false,
            closeOnCancel: false
       }, function (con) {
           if (con) {
               return true
           } else {
               return false
           }
       });

    }

Answer 1

您需要使用 Promise。 Sweet Alert 返回一个您可以使用react的 promise 。请参阅来自 Github 的官方 Sweet Alert 文档 ( https://github.com/t4t5/sweetalert )

swal({
  title: "Are you sure?",
  text: "Are you sure that you want to leave this page?",
  icon: "warning",
  dangerMode: true,
})
.then(willDelete => {
  if (willDelete) {
    swal("Deleted!", "Your imaginary file has been deleted!", "success");
  }
});

您也可以使用异步。 Github 上的文档也对此进行了解释。

如果返回 swal 函数，要返回代码，您只需检查用户是否确认如下:

function UserDeleteConfirmation() {
           return  swal({
            title: "Are you sure to Logout? ",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: '#DD6B55',
            confirmButtonText: 'Yes, I am sure!',
            cancelButtonText: "No, cancel it!",
            closeOnConfirm: false,
            closeOnCancel: false
        });
}

UserDeleteConfirmation().then((isClicked) => {
    //isClicked is true if the button is clicked
}