要实现点击当前高亮的功能,你需要确保在用户点击某个项时,正确更新状态并反映在 UI 上。根据你提供的代码,我注意到你的 className
判断有点问题。特别是在高亮状态下,当 active
等于 item1.goodsInfo.goodsId
时,应该为该元素添加一个高亮的样式,而不是相反。
以下是实现点击当前项后将其高亮显示的示例代码:
{item?.subNode?.map((item1, index1) => (
<div
className={`home-popup-popupItem-content-subItem ${
active === item1.goodsInfo.goodsId ? 'active' : ''
}`}
key={index1}
onClick={() => {
setActive(item1.goodsInfo.goodsId); // 设置当前活动ID
}}
>
{/* 这里可以放置每个项的内容,比如: */}
{item1.goodsInfo.name} {/* 假设 goodsInfo 有一个 name 属性 */}
</div>
))}
注意事项:
状态设置:
- 在
onClick
中调用setActive(item1.goodsInfo.goodsId)
来更新当前活动 ID。
- 在
CSS 类名逻辑:
- 如果
active
等于item1.goodsInfo.goodsId
,则给该 div 添加'active'
类,否则只使用基础类名。这种方式保证了只有被选中的项目才会添加高亮样式。
- 如果
CSS 样式:
- 确保你的 CSS 文件中定义了
.active
类,使其能有效地展示高亮效果。例如: “`css .home-popup-popupItem-content-subItem { /* 普通状态的样式 */ }
.home-popup-popupItem-content-subItem.active { background-color: yellow; /* 高亮颜色或其他样式 */ } “`
- 确保你的 CSS 文件中定义了
这样做后,当你点击任何子节点(subNode)时,该节点就会被高亮显示。同时,其它节点将不再具有高亮效果。如果还有其他需求或者具体问题,请随时告诉我!
内容由零声教学AI助手提供,问题来源于学员提问