react中如何使用确认框

使用 window.confirm

在React中可以直接调用浏览器的原生确认框，通过window.confirm实现简单的确认交互。这种方式会阻塞代码执行，直到用户点击确认或取消。

const handleDelete = () => {
  const isConfirmed = window.confirm('确定要删除此项吗？');
  if (isConfirmed) {
    // 执行删除操作
    console.log('已确认删除');
  }
};

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

对于更美观或定制化的确认框，可以安装第三方库如react-confirm-alert。

安装依赖：

npm install react-confirm-alert

使用示例：

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

const handleCustomConfirm = () => {
  confirmAlert({
    title: '确认操作',
    message: '确定要提交吗？',
    buttons: [
      {
        label: '确定',
        onClick: () => alert('提交成功')
      },
      {
        label: '取消',
        onClick: () => {}
      }
    ]
  });
};

自定义确认组件

通过React状态和组件实现完全自定义的确认框，灵活性最高。

import { useState } from 'react';

const CustomConfirm = () => {
  const [showConfirm, setShowConfirm] = useState(false);

  const handleConfirm = () => {
    setShowConfirm(true);
  };

  const onConfirm = () => {
    setShowConfirm(false);
    console.log('用户确认');
  };

  const onCancel = () => {
    setShowConfirm(false);
    console.log('用户取消');
  };

  return (
    <div>
      <button onClick={handleConfirm}>触发确认</button>
      {showConfirm && (
        <div className="confirm-modal">
          <p>确定执行此操作？</p>
          <button onClick={onConfirm}>确定</button>
          <button onClick={onCancel}>取消</button>
        </div>
      )}
    </div>
  );
};

结合Ant Design的Modal组件

如果项目中使用Ant Design，可以直接利用其Modal组件实现确认框。

import { Modal, Button } from 'antd';

const AntdConfirm = () => {
  const [visible, setVisible] = useState(false);

  const showModal = () => {
    setVisible(true);
  };

  const handleOk = () => {
    setVisible(false);
    console.log('用户点击确定');
  };

  const handleCancel = () => {
    setVisible(false);
    console.log('用户点击取消');
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        打开确认框
      </Button>
      <Modal
        title="确认提示"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>确定要执行此操作吗？</p>
      </Modal>
    </>
  );
};