ReactJs中对模态的传递函数

Question

在ReactJs中的应用程序中，我试图使用一个模式来确认用户的删除。通常，我在users表中创建了一个delete函数，从我的数据库中删除一个用户。现在我想把这个功能传递给模式。我想知道如何才能轻松地将delete函数传递给模态。当我确认模态中的删除操作时，用户将被删除。如有任何指导，我将不胜感激。

MyModal.js

import React from "react";

export default function MyModal() {
  const [showModal, setShowModal] = React.useState(false);
  return (
    <>
      <button
        className="bg-red-600 text-white active:bg-pink-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={() => setShowModal(true)}
      >
        Delete
      </button>
      {showModal ? (
        <>
          <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">
              {/*content*/}
              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
                {/*header*/}
                <div className="flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t">
                  <h3 className="text-3xl font-semibold">Modal Title</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={() => setShowModal(false)}
                  >
                    <span className="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
                      ×
                    </span>
                  </button>
                </div>
                {/*body*/}
                <div className="relative p-6 flex-auto">
                  <p className="my-4 text-slate-500 text-lg leading-relaxed">
                    Are you sure you want to delete this user?
                  </p>
                </div>
                {/*footer*/}
                <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={() => setShowModal(false)}
                  >
                    Close
                  </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={() => setShowModal(false)}
                  >
                    Delete
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
        </>
      ) : null}
    </>
  );
}

ManageUser.js

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)
  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)
  }

  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} user={user} 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">
                          <MyModal/><button className="bg-red-500 hover:bg-[#00df9a]  text-white font-semibold py-2 px-4 border border-zinc-900 rounded shadow" onClick={() => deleteOperation(user._id)}>Delete</button>
                          </td>
                      </tr>
                      
                      ))}
                  </tbody>
              </table>
          </div>
        }   
      </div>
      
      </div>
    </div>
  );
}

export default ManageUser;

有什么快速的方法来传递函数，我用来删除一个用户到这个模式吗？

Answer 1

您可以将一个属性传递给您的模型组件，让我们将其称为onSubmit。

export default function MyModal( { onSubmit } ) {

在您的模式中，您可以使用submitHandler处理提交，如

const submitHandler = () => {
 setShowModal(false);
 onSubmit();
}

MyModal中的删除按钮可以调用此submitHandler，如下所示

<button onClick={submitHandler}>
Delete
</button>

在ManageUser组件中，可以将deleteOperation作为onSubmit函数传递，如下所示

<MyModal onSubmit={() => deleteOperation(user.id)}/>