ZBLOG

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

为了实现双层循环中点击项高亮时不影响其他项的功能,您需要确保每个item的状态是独立管理的。这可以通过在组件的状态中为每个item维护一个独立的高亮状态来实现。

这里有一个示例代码,展示如何做到这一点:

import React, { useState } from 'react';

const ExampleComponent = ({ serviceItem }) => {
  // 使用一个对象来存储每个 item 的选中状态
  const [selectedGoodsIds, setSelectedGoodsIds] = useState({});

  const handleClick = (goodsId, itemIndex) => {
    // 复制当前状态以避免直接修改
    const currentSelections = { ...selectedGoodsIds };
    
    // 切换选择状态
    if (currentSelections[itemIndex] === goodsId) {
      delete currentSelections[itemIndex]; // 如果已选中则取消选择
    } else {
      currentSelections[itemIndex] = goodsId; // 否则设置为当前选择的 goodsId
    }

    setSelectedGoodsIds(currentSelections);
  };

  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 ${
                  selectedGoodsIds[index] === item1?.goodsInfo?.goodsId ? 'subItemActive' : ''
                }`}
                onClick={() => {
                  if (!item1?.goodsInfo?.goodsStock) return;
                  handleClick(item1.goodsInfo.goodsId, index);
                }}
              >
                {/* 渲染子项内容 */}
                {item1.name} {/* 假设这里是渲染子项名字 */}
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

export default ExampleComponent;

解读

  • 状态管理: 我们使用了 selectedGoodsIds 来保存每个 subSelects 项目下被选中的商品 ID。这个对象的键对应于 subSelects 的索引。

  • 点击处理: 在点击子项时,我们首先获取当前存储的选中商品 ID,然后更新相应项目的值。如果该商品已经被选中,则移除它;如果没有则添加它。

  • 条件渲染: 在 className 中,根据 selectedGoodsIds[index] 是否等于当前商品 ID 来决定是否应用高亮样式(例如:’subItemActive’)。

这种方式确保了不同 item 下的子项之间互不干扰,各自维持自己的选中状态。


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

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

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

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

联系我们

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

微信号:3007537140

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

关注我们
x

注册

已经有帐号?