ZBLOG

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

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

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

  1. import React, { useState } from 'react';
  2. const ExampleComponent = ({ serviceItem }) => {
  3. // 使用一个对象来存储每个 item 的选中状态
  4. const [selectedGoodsIds, setSelectedGoodsIds] = useState({});
  5. const handleClick = (goodsId, itemIndex) => {
  6. // 复制当前状态以避免直接修改
  7. const currentSelections = { ...selectedGoodsIds };
  8. // 切换选择状态
  9. if (currentSelections[itemIndex] === goodsId) {
  10. delete currentSelections[itemIndex]; // 如果已选中则取消选择
  11. } else {
  12. currentSelections[itemIndex] = goodsId; // 否则设置为当前选择的 goodsId
  13. }
  14. setSelectedGoodsIds(currentSelections);
  15. };
  16. return (
  17. <div>
  18. {serviceItem?.subSelects?.map((item, index) => (
  19. <div className="home-popup-popupItem" key={index}>
  20. <div className="home-popup-popupItem-title">{item?.name}</div>
  21. <div className="home-popup-popupItem-content">
  22. {item?.subNode?.map((item1, index1) => (
  23. <div
  24. key={index1}
  25. className={`home-popup-popupItem-content-subItem ${
  26. selectedGoodsIds[index] === item1?.goodsInfo?.goodsId ? 'subItemActive' : ''
  27. }`}
  28. onClick={() => {
  29. if (!item1?.goodsInfo?.goodsStock) return;
  30. handleClick(item1.goodsInfo.goodsId, index);
  31. }}
  32. >
  33. {/* 渲染子项内容 */}
  34. {item1.name} {/* 假设这里是渲染子项名字 */}
  35. </div>
  36. ))}
  37. </div>
  38. </div>
  39. ))}
  40. </div>
  41. );
  42. };
  43. 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

注册

已经有帐号?