ReactJS中如何将用户删除函数传递至确认模态框？

1. 重构MyModal组件（转为受控组件） #

将模态框改为受控组件，通过props接收显示状态、关闭回调和确认回调，把控制权交给父组件：

import React from "react";

export default function MyModal({ show, onClose, onConfirm }) {
  return (
    <>
      {show ? (
        <>
          <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
            <div className="relative w-auto my-6 mx-auto max-w-3xl">
              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
                <div className="flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t">
                  <h3 className="text-3xl font-semibold">确认删除</h3>
                  <button
                    className="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
                    onClick={onClose}
                  >
                    <span className="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
                      ×
                    </span>
                  </button>
                </div>
                <div className="relative p-6 flex-auto">
                  <p className="my-4 text-slate-500 text-lg leading-relaxed">
                    确定要删除该用户吗？此操作不可撤销。
                  </p>
                </div>
                <div className="flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b">
                  <button
                    className="text-blue-600 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                    type="button"
                    onClick={onClose}
                  >
                    取消
                  </button>
                  <button
                    className="bg-red-600 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                    type="button"
                    onClick={() => {
                      onConfirm();
                      onClose();
                    }}
                  >
                    删除
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
        </>
      ) : null}
    </>
  );
}

2. 修改ManageUser组件，整合模态框与删除逻辑 #

添加状态跟踪待删除用户ID和模态框显示状态，调整按钮点击逻辑：

import { useEffect, useState } from "react";
import { useAuthContext } from "../hooks/useAuthContext";
import MyModal from "../components/MyModal"
import LoadingSpinner from "../components/LoadingSpinner";

function ManageUser() {
  const [users, setUser] = useState([]);
  const [loading, setLoading] = useState(false);
  // 新增状态：记录当前待删除的用户ID、模态框显示状态
  const [deleteUserId, setDeleteUserId] = useState(null);
  const [showDeleteModal, setShowDeleteModal] = useState(false);

  useEffect(() => {
    getData();
  }, []);

  async function deleteOperation(_id) {
    let result = await fetch(`/api/user/${_id}`, {
      method: "DELETE",
    });
    result = await result.json();
    console.warn(result);
    getData();
  }

  async function getData() {
    setLoading(true)
    let result = await fetch("/api/user/users");
    result = await result.json();
    setUser(result);
    setLoading(false)
  }

  // 打开模态框：设置待删除用户ID并显示模态框
  const openDeleteModal = (userId) => {
    setDeleteUserId(userId);
    setShowDeleteModal(true);
  };

  // 关闭模态框：清空状态
  const closeDeleteModal = () => {
    setShowDeleteModal(false);
    setDeleteUserId(null);
  };

  // 确认删除：执行删除操作
  const confirmDelete = () => {
    if (deleteUserId) {
      deleteOperation(deleteUserId);
    }
  };

  return (
    <div>
      <h1 className="flex justify-center py-4 text-xl font-bold">Zarządzaj użytkownikami:</h1>
      <div className="flex justify-center py-2">
        <div className="flex justify-between items-center h-30 max-w-[1240px] mx-auto px-4">
          { loading ? (
            <div className="flex justify-center items-center "><LoadingSpinner/></div>
          ) : (
            <div className=" overflow-x-auto relative shadow-md sm:rounded-lg">
              <table className="w-full text-sm text-center text-white">
                <thead className="text-xs text-white uppercase bg-rgba(6, 18, 36, 0.945)">
                  <tr>
                    <th scope="col" className="py-3 px-6">
                      Nazwa
                    </th>
                    <th scope="col" className="py-3 px-6 hidden sm:table-cell">
                      Email
                    </th>
                    <th scope="col" className="py-3 px-6">
                      Admin
                    </th>
                    <th scope="col" className="py-3 px-6">
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {users.map((user) => (
                    <tr key={user._id} className="bg-rgba(6, 18, 36, 0.945) border-b border-[#00df9a] ">
                      <th scope="row" className="py-4 px-6 font-medium text-white whitespace-nowrap">
                        {user.name}
                      </th>
                      <td className="py-4 px-6 hidden sm:table-cell">
                        {user.email}
                      </td>
                      <td className="py-4 px-6">
                        {user.isAdmin ? "Tak" : "Nie"}
                      </td>
                      <td className="py-4 px-6 text-right">
                        {/* 替换为打开模态框的按钮 */}
                        <button 
                          className="bg-red-500 hover:bg-[#00df9a]  text-white font-semibold py-2 px-4 border border-zinc-900 rounded shadow" 
                          onClick={() => openDeleteModal(user._id)}
                        >
                          Delete
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>
      {/* 全局渲染一个模态框，通过状态控制显示 */}
      <MyModal 
        show={showDeleteModal} 
        onClose={closeDeleteModal} 
        onConfirm={confirmDelete} 
      />
    </div>
  );
}

export default ManageUser;

关键修改说明 #

• MyModal受控化：移除内部状态，通过父组件传入的props控制显示/隐藏，确认按钮触发父组件传递的onConfirm回调。
• ManageUser状态管理：用deleteUserId存储当前待删除用户ID，showDeleteModal控制模态框显示，避免每行渲染独立模态框，优化性能。
• 按钮逻辑调整：点击删除按钮不再直接执行删除，而是打开模态框，确认后再触发删除操作并关闭模态框。

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