ZBLOG

{serviceItem?.subSelects?.map((item, index) => ( {item?.name}

要实现双层循环下的每个项点击高亮时不影响其他项,您可以为每个父项维护一个单独的状态。这通常通过将状态定义为一个对象来实现,其中键是父项的 ID,而值是该子项的 ID。

下面是修改后的代码示例,以支持这种结构:

import React, { useState } from 'react';

const YourComponent = ({ serviceItem }) => {
  const [activeItems, setActiveItems] = useState({});

  const toggleActive = (parentId, goodsId) => {
    setActiveItems((prev) => ({
      ...prev,
      [parentId]: prev[parentId] === goodsId ? null : goodsId // 切换当前父级下的子项激活状态
    }));
  };

  return (
    <div>
      {serviceItem?.subSelects?.map((item, index) => (
        <div className="home-popup-popupItem" key={index}>
          <div className="home-popup-popupItem-title">{item?.name}</div>
          <div className="home-popup-popupItem-content">
            {item?.subNode?.map((item1, index1) => (
              <div
                key={index1}
                className={`home-popup-popupItem-content-subItem ${
                  activeItems[item.name] === item1.goodsInfo.goodsId ? 'subItemActive' : ''
                }`}
                onClick={(e) => {
                  if (!item1?.goodsInfo?.goodsStock) return; // 检查库存
                  toggleActive(item.name, item1.goodsInfo.goodsId); // 调用切换函数
                }}
              >
                {/* 显示子项信息 */}
                {item1.goodsInfo.name} {/* 假设有 name 属性 */}
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

export default YourComponent;

关键点说明:

  1. 状态管理:

    • activeItems 是一个对象,用于存储每个父级项(通过其名称)对应的活跃子项的 ID。
  2. 切换逻辑:

    • toggleActive 函数接受父级 ID 和当前子项 ID。如果该子项已激活,则设置为 null;否则,更新为当前选中的子项 ID。
  3. 条件渲染:

    • 在渲染过程中,通过 activeItems[item.name] 来判断当前显示的子项目是否被激活,这样可以确保只针对特定父级元素内进行高亮处理。
  4. 无干扰高亮:

    • 每次点击后,只会影响到与之相关联的父项目及其子项目,不会影响其他同类项目。

这样,您就可以实现点击不同主选项下子的高亮效果,而不互相干扰。如果您有任何问题或需要进一步调整,请告诉我!


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=20414

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?