React实现列表项点击切换样式，点击其他项取消样式的问题求助

你当前的实现存在两个核心问题：

1. 单个useRef在循环渲染场景下只会指向最后一个Card组件，无法操作之前的列表项
2. 没有全局状态跟踪选中项，无法统一控制所有列表项的样式切换

正确实现思路 #

用useState保存选中项的唯一标识（如用户ID/索引），通过状态变化触发组件重渲染，动态为每个列表项设置样式。

完整代码示例 #

import { useState } from 'react';
import { Card, CardContent, Typography } from '@mui/material';

const UserList = ({ users }) => {
  // 状态保存选中的用户ID，初始为null表示无选中项
  const [selectedUserId, setSelectedUserId] = useState(null);

  const handleClick = (userId) => {
    // 点击已选中项则取消选中，否则切换为当前项
    setSelectedUserId(prev => prev === userId ? null : userId);
  };

  return (
    <div>
      {users.map(user => {
        const isSelected = selectedUserId === user.id;
        // 根据选中状态动态生成样式
        const cardStyle = {
          marginBottom: "5px",
          backgroundColor: isSelected ? 'green' : '',
          color: isSelected ? 'white' : ''
        };

        return (
          <Card 
            key={user.id} 
            elevation={6} 
            style={cardStyle}
            onClick={() => handleClick(user.id)}
          >
            <CardContent style={{ height: "10px" }}>
              <Typography>{user.name}</Typography>
            </CardContent>
          </Card>
        );
      })}
    </div>
  );
};

export default UserList;

关键说明 #

• 状态管理：用useState替代useRef，状态变化会自动触发所有列表项重新渲染，确保样式同步更新
• 唯一标识：每个列表项必须设置唯一key（这里用user.id），保证React能正确识别每个组件
• 动态样式：通过isSelected判断当前项是否被选中，动态生成对应的背景色和文字颜色
• 点击逻辑：点击时切换选中状态，支持再次点击取消选中

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