对不起,我的英语。所以,我是初学者的React,我有一个问题,我的React的画廊。当我点击图片,图片返回两次。例如,如果我点击第一张图片,然后在第二,第二将是第一张图片,再次点击正确的图片返回。我该怎么办?我要疯了。谢谢大家...!
JSX:
import react, { useEffect } from "react";
import { useState } from "react";
import "./galleryCards.css";
import { FullScreen, useFullScreenHandle } from "react-full-screen";
import image1 from "./1.jpg";
import image2 from "./2.jpg";
import image3 from "./3.jpg";
import image4 from "./4.jpg";
import image5 from "./5.jpg";
import image6 from "./6.jpg";
const images = [
{ image: image1, alt: "image1", id: 1 },
{ image: image2, alt: "image2", id: 2 },
{ image: image3, alt: "image3", id: 3 },
{ image: image4, alt: "image4", id: 4 },
{ image: image5, alt: "image5", id: 5 },
{ image: image6, alt: "image6", id: 6 },
];
const GalleryCards = (props) => {
const [id, setId] = useState(1);
const [selectedImage, setSelectedImage] = useState();
const [isClicked, setIsClicked] = useState(false);
const GetImage = (e) => {
const imageId = e.target.getAttribute("data-id");
setId(imageId);
const selectedImg = images.find((el) => {
return el.id == id;
});
setSelectedImage(selectedImg);
setIsClicked(!isClicked);
document.body.style.overflow = "hidden";
};
return (
<>
<div
className={` ${isClicked ? "gallery_overlay" : ""}`}
onClick={() => {
if (isClicked === true) {
setIsClicked(false);
document.body.style.overflow = "scroll";
}
}}
>
<div className="cardsgallery_container">
{images.map((el) => {
return (
<div
className={`gallery_item ${
isClicked ? "gallery_item_hidden" : ""
}`}
key={el.id}
>
<img
data-id={el.id}
alt={el.alt}
className="gallery_image"
src={`${el.image}`}
width={363}
height={380}
onClick={GetImage}
></img>
</div>
);
})}
</div>
<div className="image_overlay">
{" "}
<img
src={isClicked ? selectedImage.image : ""}
className={`selected_image ${
isClicked ? "img_show" : "img_hidden"
}`}
></img>
</div>
</div>
</>
);
};
export default GalleryCards;
CSS:
.gallery_item {
height: 380px;
width: 363px;
position: relative;
left: 120px;
bottom: -500px;
z-index: 100;
display: block;
}
.gallery_item_hidden {
display: none;
}
.cardsgallery_container {
display: flex;
flex-wrap: wrap;
width: 1400px;
justify-content: center;
align-items: center;
position: bottom;
bottom: -500px;
left: 300px;
z-index: -100;
}
.gallery_overlay {
z-index: 100;
background-color: black;
height: 2000px;
}
.image_overlay {
z-index: 200;
}
.selected_image {
position: relative;
left: 700px;
width: 500px;
height: 500px;
z-index: 300;
border: none;
bottom: -500px;
}
.img_hidden {
display: none;
}
.img_show {
display: block;
}
.x {
z-index: 300;
color: white;
}
1条答案
按热度按时间qojgxg4l1#
嗨@杰西卡·莫雷蒂
您使用相同的
id
变量来设置被单击图像的id
和selectedImg
对象。换句话说,当您单击图像时,selectedImg
对象和被单击图像具有相同的id
。当你点击图片时,你可以使用一个单独的变量来存储
id
。然后,使用这个变量来找到正确的selectedImg
对象。明白。下面是演示,请尝试:-codesandbox