React列表onClick函数无法触发激活状态切换，该如何排查？

核心问题分析 #

你遇到的问题根源是CSS样式的错误使用：你用了:active伪类定义激活状态的背景色，但:active仅在元素被鼠标按下的瞬间生效，松开后立即恢复原样。而你的React逻辑已经正确给选中项添加了active类，但CSS中没有为这个类设置对应的持久样式，导致点击后状态更新了，但视觉上只有:active的短暂闪现，没有持久的激活效果。

解决方案 #

1. 修复CSS样式

添加.app_card_lists.active的样式规则，实现持久的激活状态视觉效果，同时可以保留:active增强点击反馈：

.app_card_list {
  display: flex;
  flex-direction: row;
}

.app_card_lists {
  margin-left: 1.5rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 35px;
  height: 35px;
  background-color: hsl(216, 12%, 8%);
  text-align: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  color: hsl(0, 0%, 100%);
}

.app_card_lists:hover {
  background-color: hsl(217, 12%, 63%);
}

/* 新增：持久激活状态的样式 */
.app_card_lists.active {
  background-color: red;
}

/* 可选：保留点击瞬间的反馈效果 */
.app_card_lists:active {
  background-color: darkred;
}

2. 优化React状态逻辑（可选）

当前用多个布尔值管理状态存在冗余，可改为单个变量存储选中的星级，大幅简化代码：

import React, { useState } from 'react';
import './Home.css';

function Home() {
  // 单个变量存储当前选中的星级，初始值为1
  const [selectedStar, setSelectedStar] = useState(1);

  return (
    <div className='app_card_container'>
      <div className='app_card_body'>
        <div className='app_card_list'>
          {/* 循环生成星级项，避免重复代码 */}
          {[1,2,3,4,5].map(star => (
            <div
              key={star}
              className={`app_card_lists ${selectedStar === star ? 'active' : ''}`}
              onClick={() => setSelectedStar(star)}
            >
              {star}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default Home;

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