如何在React/Next.js中集成「确定要删除吗？」确认提示

方案一：用原生浏览器确认框（快速落地） #

直接修改按钮的onClick逻辑，先弹出原生确认提示，用户点击「确定」后再执行删除操作。

修改后的代码：

<td>
  <button 
    type="button"  
    className='delete' 
    onClick={() => {
      if (window.confirm('确定要删除该条目吗？')) {
        handleRemove(todoList.id);
      }
    }}
  >
    Delete
  </button>
</td>

这种方式无需额外依赖，适合快速实现，但提示框样式是浏览器默认的，无法自定义。

方案二：自定义模态框（适配项目UI风格） #

如果需要让提示框和项目整体风格统一，可以自己实现一个模态组件，或者用HTML原生的dialog元素来定制。

步骤1：添加状态控制 #

在组件内部新增状态，用来控制模态框的显示/隐藏，以及记录待删除的博客ID：

import { useState } from 'react';

// 组件内部状态
const [showConfirmModal, setShowConfirmModal] = useState(false);
const [pendingDeleteId, setPendingDeleteId] = useState(null);

步骤2：修改删除按钮点击逻辑 #

点击按钮时，只触发模态框显示并记录待删除ID，不直接执行删除：

<td>
  <button 
    type="button"  
    className='delete' 
    onClick={() => {
      setPendingDeleteId(todoList.id);
      setShowConfirmModal(true);
    }}
  >
    Delete
  </button>
</td>

步骤3：添加自定义模态框 #

在组件的JSX中插入模态框，根据状态控制其显示：

{showConfirmModal && (
  <div className="confirm-modal-overlay">
    <div className="confirm-modal">
      <p>确定要删除该条目吗？</p>
      <div className="modal-buttons">
        <button 
          onClick={() => {
            setShowConfirmModal(false);
            setPendingDeleteId(null);
          }}
        >
          取消
        </button>
        <button 
          className="confirm-delete"
          onClick={() => {
            handleRemove(pendingDeleteId);
            setShowConfirmModal(false);
            setPendingDeleteId(null);
          }}
        >
          确定删除
        </button>
      </div>
    </div>
  </div>
)}

步骤4：添加模态框样式（可选） #

在CSS文件中添加样式，让模态框更贴合项目风格：

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

.confirm-modal {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.modal-buttons {
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.confirm-delete {
  background: #dc2626;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
}

内容的提问来源于stack exchange，提问作者Maria