我如何通過sweetalert2上的輸入確認對話？

Question

function order(id){
     const { value: numberinput } = await Swal.fire({
        title: 'You are ordering' + id + 'are you sure?' ,
        text: 'When you press the "Order!" button, your order will be processed.',
        icon: 'warning',
        showCancelButton: true,
        cancelButtonColor: '#d33',
        confirmButtonColor: '#3bc42b',
        cancelButtonText: 'Cancel',
        confirmButtonText: 'Order!',
        reverseButtons: true,
        input: 'number',
        inputLabel: 'portion size: \n ‍',
        inputPlaceholder: 'Enter portion',
        inputAttributes: {
            min: 1,
            max: 20,
            step: 1
        },
        inputValue: 1,
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire({
      title: 'Your order has taken!',
        text: 'Your order of ${numberinput} portions is being prepared',
        icon: 'success',
        confirmButtonText: 'OK!'
    })
  } else if (result.isDismissed)
      Swal.fire({
        title: 'Abandoned!',
        text: 'Your order of ${numberinput} servings has been abandoned',
        icon: 'error',
        confirmButtonText: 'OK!'
        })
})
}

這不起作用，有一個 swal2 示例：

const ipAPI = '//api.ipify.org?format=json'

const inputValue = fetch(ipAPI)
  .then(response => response.json())
  .then(data => data.ip)

const { value: ipAddress } = await Swal.fire({
  title: 'Enter your IP address',
  input: 'text',
  inputLabel: 'Your IP address',
  inputValue: inputValue,
  showCancelButton: true,
  inputValidator: (value) => {
    if (!value) {
      return 'You need to write something!'
    }
  }
})

if (ipAddress) {
  Swal.fire(`Your IP address is ${ipAddress}`)
}

我想問題是我沒有寫 if (numberinput) 但我不知道我怎么能寫 if(number) 和 if(result.isConfirmed)/if(result.isDismissed) 一起。誰能幫我？ 我嘗試了很多東西，但我失敗了。

Answer 1

使用await時不應使用.then() 。 await將返回Swal.fire()的結果，然后您可以編寫普通的同步代碼來使用該結果。 這將允許您使用從該結果分配的變量。

 async function order(id) { const { value: numberinput, isConfirmed, isDismissed } = await Swal.fire({ title: 'You are ordering ' + id + ' are you sure?', text: 'When you press the "Order!" button, your order will be processed.', icon: 'warning', showCancelButton: true, cancelButtonColor: '#d33', confirmButtonColor: '#3bc42b', cancelButtonText: 'Cancel', confirmButtonText: 'Order!', reverseButtons: true, input: 'number', inputLabel: 'portion size: \\n ‍', inputPlaceholder: 'Enter portion', inputAttributes: { min: 1, max: 20, step: 1 }, inputValue: 1, }) if (isConfirmed) { Swal.fire({ title: 'Your order has taken!', text: `Your order of ${numberinput} portions is being prepared`, icon: 'success', confirmButtonText: 'OK!' }) } else if (isDismissed) { Swal.fire({ title: 'Abandoned!', text: `Your order has been abandoned`, icon: 'error', confirmButtonText: 'OK!' }) } } order(123);

 <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>