[英]How can I close my modal by clicking the close button in reactjs?
How can I close my modal by clicking the close button in reactjs?如何通过单击 reactjs 中的关闭按钮来关闭我的模式? My closeModal function is not working.我的 closeModal 函数不工作。 Help me please,.!请帮帮我,。! When I click the close button, the modal does not close.当我单击关闭按钮时,模式不会关闭。
When, I click on open the modal button then it is working, but when i click on close button then close button is not working.什么时候,我点击打开模式按钮然后它工作,但是当我点击关闭按钮然后关闭按钮不工作。 I am using the hooks in my project.我在我的项目中使用钩子。 Below, I have mentioned my code:下面,我提到了我的代码:
Gallery.jsx图库.jsx
import React, { useState } from 'react'
import "./gallery.css"
import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
const Gallery = ({ pictures, source1, source2, source3, source4, source5, source6, title }) => {
const [clickedImg, setClickedImg] = useState(null);
const [currentPictureIndex, setCurrentPictureIndex] = useState(0);
const handleClick = (e, pictures, title ) => {
setClickedImg({e, pictures, title })
console.log("showmodal state before any click")
};
const closeModal = (e) => {
try {
if (e.target.classList.contains("dismiss")) {
setClickedImg(null);
console.log(e.target.classList.contains("dismiss"))
}
} catch (error) {
console.log(error);
}
};
const handleNextClick = () => {
const nextIndex = currentPictureIndex === pictures.length - 1 ? 0 : currentPictureIndex + 1;
setCurrentPictureIndex(nextIndex);
};
const handlePrevClick = () => {
const prevIndex = currentPictureIndex === 0 ? pictures.length - 1 : currentPictureIndex - 1;
setCurrentPictureIndex(prevIndex);
};
return (
<div className="gallery" onClick={handleClick}>
<div className="galleryBox1">
<img src={source1} alt={title} className="galleryCard"/>
</div>
<div className="galleryBox2">
<div className="galleryBox3">
<div className="galleryBoxa">
<img src={source2} alt={title} className="galleryCardTwo"/>
</div>
<div className="galleryBoxb">
<img src={source3} alt={title} className="galleryCardTwo"/>
</div>
</div>
<div className="galleryBox5">
<div className="galleryBoxc">
<img src={source4} alt={title} className="galleryCardTwo"/>
</div>
<div className="galleryBoxd">
<img src={source5} alt={title} className="galleryCardTwo"/>
</div>
</div>
</div>
{
clickedImg && (
<div className="galleryModal dismiss" onClick={closeModal}>
<img
src={pictures[currentPictureIndex]}
alt={title}
className="galleryModalImg"
/>
<button className="galleryModalButton dismiss" onClick={closeModal}>
Fermer
</button>
{pictures.length !== 1 && (
<div className="galleryModalArrows" onClick={handleNextClick}>
<FaChevronRight className="galleryModalNext" />
</div>
)}
{pictures.length !== 1 && (
<div className="galleryModalArrows" onClick={handlePrevClick}>
<FaChevronLeft className="galleryModalPrev" />
</div>
)}
</div>
)}
</div>
)
}
export default Gallery
How can I close my modal by clicking the close button in reactjs?如何通过单击 reactjs 中的关闭按钮来关闭我的模式?
I have figured out the reason.我已经找到原因了。 As you have added onClick in the parent div (className="gallery")
, That's why, whenever you are clicking on any button in the div it is triggering a click on the main div's handleClick
method.当您在父 div (className="gallery")
中添加 onClick 时,这就是为什么无论何时单击 div 中的任何按钮都会触发对主 div 的handleClick
方法的单击。
If you console on the handleClick
and closeModal
function.如果您在handleClick
和closeModal
函数上进行控制台。 You will see that if you click on the close button you will see the console that is written in the handleClick()
function.您将看到,如果您单击关闭按钮,您将看到在handleClick()
函数中编写的控制台。
So I tried to move the onClick={handleClick}
from that parent div.所以我试图从那个父 div 移动onClick={handleClick}
。 And put it in a children div.并将它放在一个儿童分区中。 You can put it on className="galleryBox1"
this div or any other div.您可以将它放在className="galleryBox1"
这个 div 或任何其他 div 上。 Then it will work fine.然后它会工作正常。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.