React-切换模式打开/关闭,并根据卡的特定数据进行填充

您可以在模态变量中存储一个id或索引,以跟踪应该显示哪个模态。

const [modal, setModal] = useState({
  index: null,
  active: false,
});

我还将创建另一个函数,以在单击“查看详细信息”按钮时显示模态,否则,如果某个模态已经打开,如果您在单击按钮时调用toggleModal函数,则单击“查看细节”按钮将隐藏它。

const toggleModal = () => {
  setModal((prevModal) => ({
    ...prevModal,
    active: !prevModal.active,
  }));
};

const showDetails = (index) => {
  setModal((prevModal) => ({
      index,
      active: true,
    }));
};

<button className="cardbtn" onClick={() => showDetails(i}>
  View Details
 </button>

我还建议将用于更新主体类的if/else语句放在useEffect钩子中,因为您正在更新React组件之外的文档。如果您不熟悉useEffect,这些链接可能会有所帮助: https://www.freecodecamp.org/news/react-useeffect-absolute-beginners/ , https://www.w3schools.com/react/react_useeffect.asp , https://react.dev/reference/react/useEffect

useEffect(() => {
  if (modal.active) {
    document.body.classList.add("active-modal");
  } else {
    document.body.classList.remove("active-modal");
  }
}, [modal.active])

所以,总的来说,它看起来是这样的:

import { useState } from "react";
    import "./ActiveJobs.css";

    export default function ActiveJobs() {
  const [cards] = useState([
    {
      title: "Customer Name: Smith, James",
      jobnum: "Job Number: 1829",
      crewnum: "Crew: 0/2",
      address: "1825 Olive Ave",
    },
    {
      title: "Customer Name: Cherry, John",
      jobnum: "Job Number: 8421",
      crewnum: "Crew: 0/3",
      address: "256 Milwood Sq",
    },
    {
      title: "Customer Name: Rudd, Paul",
      jobnum: "Job Number: 0281",
      crewnum: "Crew: 0/4",
      address: "4272 Lowes Island Blvd",
    },
    {
      title: "Customer Name: Robbie, Margot",
      jobnum: "Job Number: 2516",
      crewnum: "Crew: 0/3",
      address: "265 Atlas Lane",
    },
    {
      title: "Customer Name: Bond, James",
      jobnum: "Job Number: 0420",
      crewnum: "Crew: 0/5",
      address: "1418 10th Ave",
    },
    {
      title: "Customer Name: Jordan, Micheal",
      jobnum: "Job Number: 7617",
      crewnum: "Crew: 0/10",
      address: "180 Goat Dr",
    },
  ]);

  const [modal, setModal] = useState({
    index: null,
    active: false,
  });

  const showDetails = (index) => {
    setModal((prevModal) => ({
      index,
      active: true,
    }));
  };

  const toggleModal = () => {
    setModal((prevModal) => ({
      ...prevModal,
      active: !prevModal.active,
    }));
  };

  useEffect(() => {
    if (modal.active) {
      document.body.classList.add("active-modal");
    } else {
      document.body.classList.remove("active-modal");
    }
  }, [modal.active])

  return (
    <div>
      <section>
        <div className="container">
          <h1>All Active Jobs</h1>
          <div className="cards">
            {cards.map((card, i) => (
              <div key={i} className="card">
                <h3>{card.title}</h3>
                <p>{card.jobnum}</p>
                <p>{card.crewnum}</p>
                <p>{card.address}</p>
                <button className="cardbtn" onClick={() => showDetails(i)}>
                  View Details
                </button>
                <button className="cardbtn">Assign Crew</button>
                {modal.active && modal.index === i && (
                  <div className="modal">
                    <div onClick={toggleModal} className="overlay"></div>
                    <div className="modal-content">
                      <h2>Job Details</h2>
                      <p>{card.title}</p>
                      <p>{card.jobnum}</p>
                      <p>{card.crewnum}</p>
                      <p>{card.address}</p>
                      <button className="close-modal" onClick={toggleModal}>
                        CLOSE
                      </button>
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
    );
   }