React循环渲染项添加active类后无法移除的问题求助

问题根源 #

关闭按钮的点击事件会冒泡到上层绑定了setActive(DataGroups)的父容器，导致执行顺序是：先触发setActive(false)，紧接着父容器的事件又把active设回当前的DataGroups对象，最终active类没被移除。

修复方案 #

方案1：阻止关闭按钮的事件冒泡（推荐）

给关闭按钮的点击事件添加stopPropagation()，同时建议用null重置状态（和初始值保持一致，逻辑更统一）：

const lightbox = () => {
    const [active, setActive] = useState(null);

  return (
    <div>
    {DataGroups.map((group, idx) => { // 变量名改为group避免和数组名重复，提升可读性
    return (
        <div key={group.id}>
            <div 
              onClick={() => setActive(group)} 
              className={`groups-card rounded-mainRadius ${active === group ? 'active' : ''}`} // 用===严格相等，避免隐式类型转换问题
            >
                <div className="groups-card-lightbox">
                    <h2>{group.title}</h2>
                    <p className="groups-card-description">
                        {group.description}
                    </p>
                    <div 
                      onClick={(e) => { 
                        e.stopPropagation(); // 阻止事件冒泡到父元素
                        setActive(null); 
                      }} 
                      className="font-bold hover:text-green"
                    >
                        Close the lightbox
                    </div>
                </div>
                <h2 className="groups-card-title">{group.title}</h2>
            </div>
        </div>
        )
    })}
    </div>
  )
}

方案2：调整DOM结构（如果布局允许）

把关闭按钮移到绑定了点击事件的父容器外面，这样点击关闭时不会触发父容器的setActive逻辑：

// 示例结构调整
<div key={group.id}>
    <div 
      onClick={() => setActive(group)} 
      className={`groups-card rounded-mainRadius ${active === group ? 'active' : ''}`}
    >
        <div className="groups-card-lightbox">
            <h2>{group.title}</h2>
            <p className="groups-card-description">
                {group.description}
            </p>
        </div>
        <h2 className="groups-card-title">{group.title}</h2>
    </div>
    {/* 关闭按钮移到父容器外 */}
    <div 
      onClick={() => setActive(null)} 
      className="font-bold hover:text-green"
    >
        Close the lightbox
    </div>
</div>

内容的提问来源于stack exchange，提问作者Gui