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

Question

我设置了一些卡片，其中每张卡片都包含特定数据（职位编号、职位等），并且我尝试添加一个弹出模式，可用于查看有关该职位的更多详细信息。如果您单击“查看详细信息”按钮，则会弹出一个模式，其中包含有关特定卡片的更多详细信息。

但是，在执行此操作时，React 会立即渲染所有卡片，因为每个按钮只有一个切换模式函数。我希望数据显示来自您按下按钮的特定卡片。

我已经尝试了一段时间的新事物，而且我的反应还很新。

当只有一个弹出窗口应该渲染时，所有弹出窗口都会渲染。

需要某种方法来检查单击了哪张卡并仅渲染该特定的弹出窗口。这是代码：

    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(false);

  const toggleModal = () => {
    setModal(!modal);
  };

  if (modal) {
    document.body.classList.add("active-modal");
  } else {
    document.body.classList.remove("active-modal");
  }

  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={toggleModal}>
                  View Details
                </button>
                <button className="cardbtn">Assign Crew</button>
                {modal && (
                  <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>
    );
   }

Answer 1

您可以在模态变量中存储 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>
    );
   }