如何只打开特定的模态窗口？

Question

我只需要打开我单击的模态 div。但是当我单击任何元素时它们都会打开。如何使其仅进入我点击的模式？

应用程序.js

import { useEffect, useState } from "react";

import Modal from "./components/Modal";

import "./style.css";

function App() {

  useEffect(() => {

    fetch(

      "https://api.unsplash.com/photos/?client_id=cf49c08b444ff4cb9e4d126b7e9f7513ba1ee58de7906e4360afc1a33d1bf4c0"

    )

      .then((res) => res.json())

      .then((result) => setItem(result));

  }, []);

  const [item, setItem] = useState([]);

  const [modalActive, setModalActive] = useState(false);

  return (

    <div className="app">

      {item.map((item) => (

        <div

          className="image-container"

          key={item.id}

          onClick={() => setModalActive(true)}

        >

          <img className="image" src={item.urls.regular} alt="logo" />

          <div className="info">

            <img

              className="avatar"

              src={item.user.profile_image.small}

              alt="avatar"

            />

            <div className="text">

              <p className="name">{item.user.username}</p>

              <p className="name">{item.alt_description}</p>

            </div>

          </div>

          <Modal

            active={modalActive}

            setActive={setModalActive}

            url={item.urls.regular}

          />

        </div>

      ))}

    </div>

  );

}

export default App;

模态.jsx

import React from "react";

import "./index.css";

const Modal = ({ setActive, active, url }) => {

  return (

    <div

      className={active ? "modal active" : "modal"}

      onClick={() => setActive(false)}

    >

      <div className="modal__img">

        <img src={url}/>

      </div>

    </div>

  );

};

export default Modal;

Answer 1

其他解决方案是使用索引来显示或隐藏模式：&nbsp;<div className="app">&nbsp; &nbsp; &nbsp; {item.map((item, index) => (&nbsp; &nbsp; &nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="image-container"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={item.id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={() => setModalActive(index)}&nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img className="image" src={item.urls.regular} alt="logo" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="info">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="avatar"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src={item.user.profile_image.small}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alt="avatar"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="text">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p className="name">{item.user.username}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p className="name">{item.alt_description}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Modal&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; active={modalActive === index}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setActive={setModalActive}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url={item.urls.regular}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; </div>