当前位置：首页 > React

react中如何使用确认框

2026-01-25 00:43:42React

使用 `window.confirm` 实现基础确认框

在 React 中可以直接调用浏览器原生 window.confirm 方法，这种方式简单直接但样式不可定制。
当用户点击按钮时触发确认框，根据用户选择执行不同逻辑：

react中如何使用确认框

function ConfirmDemo() {
  const handleDelete = () => {
    if (window.confirm('确定要删除此项吗？')) {
      console.log('执行删除操作');
    } else {
      console.log('取消删除');
    }
  };

  return <button onClick={handleDelete}>删除项目</button>;
}

使用第三方库（如 `react-confirm-alert`）

通过 react-confirm-alert 库可以创建高度自定义的确认框，支持样式和布局的完全控制。
安装依赖后，通过 confirmAlert 函数调用：

react中如何使用确认框

npm install react-confirm-alert

import { confirmAlert } from 'react-confirm-alert';
import 'react-confirm-alert/src/react-confirm-alert.css';

function CustomConfirm() {
  const showAlert = () => {
    confirmAlert({
      title: '确认操作',
      message: '此操作不可逆，是否继续？',
      buttons: [
        {
          label: '确定',
          onClick: () => alert('已确认')
        },
        {
          label: '取消',
          onClick: () => null
        }
      ]
    });
  };

  return <button onClick={showAlert}>自定义确认框</button>;
}

基于 Modal 组件实现自定义确认框

通过 React 状态管理和 Modal 组件（如 Ant Design 的 Modal）可以灵活控制确认框的显示与行为：

import { useState } from 'react';
import { Modal, Button } from 'antd';

function ModalConfirm() {
  const [isOpen, setIsOpen] = useState(false);

  const handleConfirm = () => {
    setIsOpen(false);
    console.log('确认操作');
  };

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>打开确认框</Button>
      <Modal
        title="提示"
        open={isOpen}
        onOk={handleConfirm}
        onCancel={() => setIsOpen(false)}
      >
        <p>确定要提交当前数据吗？</p>
      </Modal>
    </>
  );
}

使用 `SweetAlert2` 创建美观的确认框

SweetAlert2 提供丰富的动画和样式选项，适合需要视觉吸引力的场景：

npm install sweetalert2

import Swal from 'sweetalert2';

function SweetConfirm() {
  const showAlert = () => {
    Swal.fire({
      title: '是否保存修改？',
      icon: 'question',
      showCancelButton: true,
      confirmButtonText: '保存',
      cancelButtonText: '放弃'
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire('已保存!', '', 'success');
      }
    });
  };

  return <button onClick={showAlert}>保存更改</button>;
}