当前位置：首页 > React

react实现comfire组件

2026-01-27 05:16:19React

实现 React Confirmation 组件

创建一个可复用的确认对话框组件，用于在用户执行关键操作前进行二次确认。

基本结构

使用 React 的状态管理和事件处理来实现确认对话框：

react实现comfire组件

import React, { useState } from 'react';

const ConfirmationDialog = ({ message, onConfirm, onCancel }) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleConfirm = () => {
    onConfirm();
    setIsOpen(false);
  };

  const handleCancel = () => {
    onCancel();
    setIsOpen(false);
  };

  return (
    <>
      <button onClick={() => setIsOpen(true)}>触发操作</button>

      {isOpen && (
        <div className="confirmation-dialog">
          <div className="dialog-content">
            <p>{message}</p>
            <div className="dialog-actions">
              <button onClick={handleConfirm}>确认</button>
              <button onClick={handleCancel}>取消</button>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

样式优化

添加基本样式使对话框更专业：

react实现comfire组件

.confirmation-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 400px;
  width: 100%;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  gap: 10px;
}

使用 Portal 优化渲染

为避免 CSS 层级问题，使用 ReactDOM.createPortal：

import ReactDOM from 'react-dom';

const ConfirmationDialog = ({ message, onConfirm, onCancel }) => {
  // ...其他代码

  return (
    <>
      <button onClick={() => setIsOpen(true)}>触发操作</button>

      {isOpen && ReactDOM.createPortal(
        <div className="confirmation-dialog">
          {/* 对话框内容 */}
        </div>,
        document.body
      )}
    </>
  );
};

添加动画效果

使用 CSS 过渡效果增强用户体验：

.confirmation-dialog {
  /* 其他样式 */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.confirmation-dialog.show {
  opacity: 1;
}

.dialog-content {
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}

.confirmation-dialog.show .dialog-content {
  transform: translateY(0);
}

完整实现示例

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './ConfirmationDialog.css';

const ConfirmationDialog = ({
  triggerText = "删除",
  message = "确定要执行此操作吗？",
  confirmText = "确定",
  cancelText = "取消",
  onConfirm,
  onCancel,
}) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleConfirm = () => {
    onConfirm && onConfirm();
    setIsOpen(false);
  };

  const handleCancel = () => {
    onCancel && onCancel();
    setIsOpen(false);
  };

  return (
    <>
      <button onClick={() => setIsOpen(true)}>{triggerText}</button>

      {isOpen && ReactDOM.createPortal(
        <div className={`confirmation-dialog ${isOpen ? 'show' : ''}`}>
          <div className="dialog-content">
            <p>{message}</p>
            <div className="dialog-actions">
              <button className="cancel-btn" onClick={handleCancel}>
                {cancelText}
              </button>
              <button className="confirm-btn" onClick={handleConfirm}>
                {confirmText}
              </button>
            </div>
          </div>
        </div>,
        document.body
      )}
    </>
  );
};

export default ConfirmationDialog;

使用示例

import ConfirmationDialog from './ConfirmationDialog';

function App() {
  const handleDelete = () => {
    console.log('项目已删除');
  };

  return (
    <div>
      <ConfirmationDialog
        triggerText="删除项目"
        message="确定要删除这个项目吗？此操作不可撤销。"
        onConfirm={handleDelete}
      />
    </div>
  );
}

高级功能扩展

自定义渲染：允许传入自定义渲染函数
异步操作：处理确认时的异步操作
主题支持：通过 Context 提供主题支持
键盘交互：添加 ESC 关闭和 Enter 确认功能

const ConfirmationDialog = ({
  // ...其他props
  renderTrigger,
  asyncAction = false,
}) => {
  const [loading, setLoading] = useState(false);

  const handleConfirm = async () => {
    if (asyncAction) {
      setLoading(true);
      try {
        await onConfirm();
      } finally {
        setLoading(false);
        setIsOpen(false);
      }
    } else {
      onConfirm();
      setIsOpen(false);
    }
  };

  return (
    <>
      {renderTrigger ? (
        renderTrigger(() => setIsOpen(true))
      ) : (
        <button onClick={() => setIsOpen(true)}>{triggerText}</button>
      )}

      {/* 对话框内容 */}
      {loading && <div className="loading-overlay">处理中...</div>}
    </>
  );
};