React交互式评分卡片：如何修改目标Div的CSS背景色

核心问题出在状态管理和样式判断逻辑上，以下是可行的实现方案：

实现思路 #

• 用一个状态变量记录当前选中的评分索引（而非布尔值或其他类型）
• 每个评分Div点击时，将自身的索引传给状态更新函数
• 渲染时对比每个Div的索引与选中状态，仅给匹配的Div设置白色背景

完整代码示例 #

import { useState } from 'react';

const RatingCard = () => {
  // 初始值设为null，表示未选中任何评分
  const [selectedRating, setSelectedRating] = useState(null);

  // 点击事件：接收当前评分的索引
  const handleRatingClick = (index) => {
    setSelectedRating(index);
  };

  return (
    <div className="rating-container">
      {/* 循环生成5个评分Div */}
      {[1,2,3,4,5].map((rating, index) => (
        <div
          key={index}
          className={`rating-item ${selectedRating === index ? 'selected' : ''}`}
          onClick={() => handleRatingClick(index)}
        >
          {rating}
        </div>
      ))}
    </div>
  );
};

// 对应的CSS样式
/*
.rating-container {
  display: flex;
  gap: 8px;
}

.rating-item {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.rating-item.selected {
  background-color: white;
  border: 1px solid #ccc;
}
*/
export default RatingCard;

关键说明 #

1. 状态设计：用selectedRating存储选中的索引（0-4），确保每次只有一个索引被匹配，避免多个元素同时满足样式条件
2. 点击事件：直接传递循环的index给状态更新函数，Div本身没有value属性，所以之前用e.target.value无效
3. 样式判断：通过动态类名切换，只有索引与selectedRating严格相等的Div会加上selected类，实现单独变色
4. key的作用：key是React识别列表元素的唯一标识，和样式状态无关，所以之前加key无法解决样式问题是正常的

你之前的问题排查 #

• 点击1、2号同时变色，大概率是样式判断用了范围逻辑（比如selectedRating <= index），而非严格相等
• 若之前用了多个独立状态（比如isSelected1、isSelected2），会导致状态管理混乱，单个状态存储索引才是最优解

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