React中实现悬停加入购物车按钮时仅修改对应项样式的方法

问题根源 #

当前使用了全局的hovered布尔状态，所有商品项都绑定同一个style变量，导致任意一个按钮触发悬停时，所有商品项的样式都会同步改变。

修复方案：精准控制单个商品项状态 #

将全局布尔状态改为记录当前悬停商品的ID，实现对单个商品项的样式精准控制：

修改后的代码 #

import React, { useState } from "react";
import styles from "./category.module.css";
import Categories from "./Categories";

const Category = () => {
  // 用状态存储当前悬停的商品ID，初始值为null
  const [hoveredItemId, setHoveredItemId] = useState(null);
  const [data, setData] = useState(Categories);

  const filterResult = (catItem) => {
    const result = Categories.filter((curData) => curData.category === catItem);
    setData(result);
  };

  return (
    <>
      <div className={styles.items}>
        {data.map((value) => {
          const { id, title, price, description } = value;
          // 判断当前项是否为悬停状态
          const isHovered = hoveredItemId === id;
          // 仅对悬停项应用样式
          const itemStyle = isHovered
            ? { backgroundColor: "#ffcbcb", color: "#fff", transition: "all 0.5s ease" }
            : {};

          return (
            <div className={styles.item} key={id} style={itemStyle}>
              <h1>{title}</h1>
              <p>
                {price} <span>$</span>
              </p>
              <p>{description}</p>
              <button
                onMouseEnter={() => setHoveredItemId(id)}
                onMouseLeave={() => setHoveredItemId(null)}
                className={styles.btn}
              >
                Add to Cart
              </button>
            </div>
          );
        })}
      </div>
    </>
  );
};

export default Category;

核心改动 #

• 替换全局布尔状态hovered为hoveredItemId，存储当前悬停商品的唯一ID
• 遍历商品时，通过ID匹配判断是否为当前悬停项，仅对匹配项应用样式
• 按钮的悬停事件绑定当前商品ID，精准控制单个项的状态切换

更优方案：纯CSS实现（推荐） #

无需React状态，直接通过CSS选择器实现效果，代码更简洁且性能更好：

在category.module.css中添加：

/* 鼠标悬停商品项时触发样式 */
.item:hover {
  background-color: #ffcbcb;
  color: #fff;
  transition: all 0.5s ease;
}

/* 仅当悬停按钮时触发商品项样式 */
.item:has(.btn:hover) {
  background-color: #ffcbcb;
  color: #fff;
  transition: all 0.5s ease;
}

之后移除React中所有与悬停相关的状态逻辑即可。

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