当前位置：首页 > React

react实现confirm

2026-01-26 11:19:07React

实现自定义确认对话框

在React中实现自定义确认对话框可以通过状态管理和条件渲染来完成。以下是几种常见方法：

使用状态管理控制对话框显示

import React, { useState } from 'react';

function App() {
  const [showConfirm, setShowConfirm] = useState(false);
  const [action, setAction] = useState(null);

  const handleConfirm = () => {
    action && action();
    setShowConfirm(false);
  };

  const confirm = (callback) => {
    setAction(() => callback);
    setShowConfirm(true);
  };

  const deleteItem = () => {
    confirm(() => {
      console.log('Item deleted');
    });
  };

  return (
    <div>
      <button onClick={deleteItem}>Delete</button>

      {showConfirm && (
        <div className="confirm-dialog">
          <p>Are you sure?</p>
          <button onClick={handleConfirm}>Yes</button>
          <button onClick={() => setShowConfirm(false)}>No</button>
        </div>
      )}
    </div>
  );
}

使用Portal实现模态对话框

对于更专业的实现，可以使用ReactDOM.createPortal将对话框渲染到body：

import ReactDOM from 'react-dom';

function ConfirmDialog({ message, onConfirm, onCancel }) {
  return ReactDOM.createPortal(
    <div className="modal-overlay">
      <div className="modal-content">
        <p>{message}</p>
        <button onClick={onConfirm}>Confirm</button>
        <button onClick={onCancel}>Cancel</button>
      </div>
    </div>,
    document.body
  );
}

使用Context实现全局确认

通过React Context可以在任何组件中触发确认对话框：

const ConfirmContext = React.createContext();

function ConfirmProvider({ children }) {
  const [confirmState, setConfirmState] = useState(null);

  const confirm = (message) => {
    return new Promise((resolve) => {
      setConfirmState({
        message,
        resolve
      });
    });
  };

  const handleClose = (result) => {
    confirmState.resolve(result);
    setConfirmState(null);
  };

  return (
    <ConfirmContext.Provider value={confirm}>
      {children}
      {confirmState && (
        <ConfirmDialog
          message={confirmState.message}
          onConfirm={() => handleClose(true)}
          onCancel={() => handleClose(false)}
        />
      )}
    </ConfirmContext.Provider>
  );
}

使用第三方库

现有库如react-confirm-box提供了现成的解决方案：

import { confirmAlert } from 'react-confirm-box';

async function handleDelete() {
  const result = await confirmAlert('Are you sure?');
  if (result) {
    // 执行删除操作
  }
}

每种方法各有优势，简单需求可使用状态管理，复杂应用推荐使用Context或第三方库方案。对话框样式可通过CSS自定义，确保符合应用设计规范。

react实现confirm