React新手求教：如何添加删除确认Modal？放置位置在哪？

直接把Modal放在当前组件的return结构里，和你的表格同级就行。核心思路是用状态控制Modal的显示/隐藏，同时记录当前要删除的ID，具体改法如下：

步骤1：添加状态管理 #

先在组件里加两个状态，分别控制Modal显示和存储待删除的ID：

import { useState } from 'react';
// 其他导入（axios、navigate这些保持不变）

const YourComponent = () => {
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [currentDeleteId, setCurrentDeleteId] = useState(null);
  // 你的其他状态（比如data）和函数

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

原来的handleDelete改成触发Modal显示，而不是直接调用window.confirm：

const handleDelete = (id) => {
  setCurrentDeleteId(id);
  setShowDeleteModal(true);
};

步骤3：添加Modal到组件的JSX结构里 #

把Modal放在return的最外层div里，和表格同级（确保它能覆盖在页面上方）：

return (
  <div>
    {/* 你的表格部分保持不变 */}
    <thead>
      <tr>
        <th>name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{data.id}</td>
        <td>
          <button onClick={() => handleDelete(data.id)} className='btn btn-sm'>Delete</button>
        </td>
      </tr>
    </tbody>

    {/* 这里放删除确认Modal */}
    {showDeleteModal && (
      <div style={{
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        backgroundColor: 'rgba(0,0,0,0.5)',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
      }}>
        <div style={{
          backgroundColor: 'white',
          padding: '20px',
          borderRadius: '8px'
        }}>
          <p>Delete this?</p>
          <div style={{ marginTop: '15px', display: 'flex', gap: '10px' }}>
            <button 
              onClick={() => {
                // 确认删除逻辑
                axios.delete(`https://64d9e02de947d30a380a6a16.mockapi.io/todos/${currentDeleteId}`)
                  .then(res => {
                    navigate("/");
                    setShowDeleteModal(false);
                  })
                  .catch(err => {
                    console.log(err);
                    setShowDeleteModal(false);
                  });
              }}
              className='btn btn-sm'
            >
              Confirm
            </button>
            <button 
              onClick={() => setShowDeleteModal(false)}
              className='btn btn-sm'
            >
              Cancel
            </button>
          </div>
        </div>
      </div>
    )}
  </div>
);

关键点说明 #

• Modal放在最外层div里，用fixed定位实现全局覆盖，确保不会被表格内容遮挡
• 用showDeleteModal状态控制Modal的渲染/卸载，避免不必要的DOM存在
• currentDeleteId用来临时存储要删除的ID，确认时再传给axios请求

如果用第三方Modal组件（比如Ant Design的Modal），思路也是一样的：把组件放在同级位置，用状态控制visible属性，确认按钮绑定删除逻辑即可。

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