如何在Sweet Alert 2的按钮上绑定onClick点击事件

开发者阿泽

2026-10-1

Sweet Alert 2 按钮绑定 onClick 点击事件的实现方法

Sweet Alert 2 不需要像普通按钮一样直接在组件标签上声明onClick属性，库本身提供了多种适配场景的事件绑定方案，以下是对应实现：

方案1：通过结果回调绑定（最常用）

内置的确认、取消按钮点击后会返回对应状态，直接在回调中判断触发对应方法即可，示例代码如下：

import Swal from 'sweetalert2'

const openAlert = () => {
  Swal.fire({
    title: '登录确认',
    text: '是否确认登录当前账号？',
    showCancelButton: true,
    confirmButtonText: 'Sign In !',
    cancelButtonText: '暂不登录'
  }).then(res => {
    // 点击确认按钮时触发signIn方法
    if (res.isConfirmed) {
      signIn()
    }
    // 若需要监听取消按钮点击，补充判断res.isDismissed即可
  })
}

方案2：直接给按钮DOM绑定事件（和你给出的示例逻辑一致）

如果需要和<Button onClick={signIn}>的逻辑完全对齐，直接给按钮节点绑定点击监听即可，Sweet Alert 2 提供了内置方法快速获取按钮节点：

Swal.fire({
  title: '登录提示',
  confirmButtonText: 'Sign In !',
  didOpen: () => {
    // 获取确认按钮DOM节点，绑定点击事件
    const confirmBtn = Swal.getConfirmButton()
    confirmBtn.addEventListener('click', signIn)
  },
  // 框架场景建议补充关闭时解绑逻辑，避免内存泄漏
  willClose: () => {
    const confirmBtn = Swal.getConfirmButton()
    confirmBtn.removeEventListener('click', signIn)
  }
})

方案3：自定义HTML按钮的绑定方式

如果你在弹出框内容中插入了自定义编写的按钮元素，可以通过ID选择器获取后绑定事件：

Swal.fire({
  title: '自定义按钮示例',
  html: `<button id="customSignInBtn">Sign In !</button>`,
  didOpen: () => {
    document.querySelector('#customSignInBtn').addEventListener('click', signIn)
  }
})