ReactJS中点击关闭按钮无法关闭Modal的问题求助（附代码）

问题场景 #

在React项目中使用Hooks开发的Gallery组件，点击图片可正常打开Modal，但点击关闭按钮或Modal背景时，closeModal函数无法生效，Modal无法关闭。

问题原因 #

1. 事件冒泡冲突：最外层.gallery容器绑定了handleClick事件，点击Modal内的任何元素时，事件会向上冒泡到.gallery，触发handleClick重新设置显示状态，直接抵消closeModal的关闭操作。
2. closeModal逻辑冗余且易出错：依赖e.target.classList.contains("dismiss")判断是否关闭，但点击按钮文本时，e.target可能是无classList属性的文本节点，会进入异常分支；即使判断成功，冒泡触发的handleClick也会立刻将状态改回。
3. 状态存储不合理：将e、pictures等无关值存入clickedImg状态，既冗余又可能引发不必要的重渲染。

修复方案 #

• 阻止事件冒泡：在Modal内所有点击事件中调用e.stopPropagation()，避免触发外层.gallery的handleClick。
• 简化关闭逻辑：closeModal直接将Modal状态设为关闭，无需依赖class判断，逻辑更可靠。
• 优化状态设计：用布尔值标记Modal的显示/隐藏状态，无需存储额外冗余数据。

完整修复代码 #

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 [isModalOpen, setIsModalOpen] = useState(false);
  const [currentPictureIndex, setCurrentPictureIndex] = useState(0);

  const handleClick = () => {
    setIsModalOpen(true);
  };
  
  const closeModal = (e) => {
    e.stopPropagation();
    setIsModalOpen(false);
  };

  const handleNextClick = (e) => {
    e.stopPropagation();
    const nextIndex = currentPictureIndex === pictures.length - 1 ? 0 : currentPictureIndex + 1;
    setCurrentPictureIndex(nextIndex);
  };

  const handlePrevClick = (e) => {
    e.stopPropagation();
    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>
        {
          isModalOpen && (
            <div className="galleryModal" onClick={closeModal}>
                <img
                    src={pictures[currentPictureIndex]}
                    alt={title}
                    className="galleryModalImg"
                />
                <button className="galleryModalButton" 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

修改说明 #

• 将clickedImg改为isModalOpen，用布尔值标记Modal状态，语义更清晰。
• Modal内所有点击事件（关闭按钮、切换箭头）添加e.stopPropagation()，彻底阻断事件冒泡到外层容器。
• 移除closeModal中冗余的class判断和try-catch，直接设置关闭状态，逻辑更简洁可靠。
• 简化handleClick逻辑，无需传递多余参数，直接打开Modal。

内容的提问来源于stack exchange，提问作者Éric Colday Noubissi