如何实现React卡片点击后返回页面，点击项文本置灰功能

原代码的核心问题是用单个布尔值isSelected控制所有卡片的样式状态，导致点击任意卡片时所有文本都会同步变灰。要实现单个卡片独立标记，需要用集合来记录每个被点击过的卡片的唯一标识，比如邮件ID，以此区分不同卡片的状态。

修改后的完整代码 #

export default function ListComponent({ handleClick }) {
  const [data, setData] = useState([]);
  // 用Set存储已点击的邮件唯一标识，避免重复记录
  const [selectedIds, setSelectedIds] = useState(new Set());

  useEffect(() => {
    getMailbox()
      .then((response) => {
        if (response?.success) {
          setData(response?.data?.mails);
        }
      })
      .catch((err) => {
        console.log("err", err);
      });
    
    // 可选：从localStorage恢复选中状态，解决返回页面时状态丢失的问题
    const savedIds = localStorage.getItem('selectedMailIds');
    if (savedIds) {
      setSelectedIds(new Set(JSON.parse(savedIds)));
    }
  }, []);

  // 可选：持久化选中状态到localStorage
  useEffect(() => {
    localStorage.setItem('selectedMailIds', JSON.stringify([...selectedIds]));
  }, [selectedIds]);

  return (
    <div className={styles.messageBoxContainer}>
      {data.map((item, index) => (
        <div
          key={`item-container-${index}`}
          className={styles.mailItemContainer}
          onClick={() => {
            handleClick(item);
            // 点击时将当前邮件的唯一标识加入选中集合
            setSelectedIds(prev => new Set([...prev, item.id]));
          }}>
          <div className={styles.mailOwner}>
            {/* 判断当前卡片是否被点击过，应用对应样式 */}
            <p className={selectedIds.has(item.id) ? styles.userEmailTextSelected : styles.userEmailText}>
              {item?.senderName}
            </p>
          </div>
        </div>
      ))}
    </div>
  );
}

关键修改说明 #

1. 状态替换：把全局布尔值isSelected改成selectedIds集合，专门存储被点击卡片的唯一标识（示例中用邮件id，如果数据里没有id，可以用senderName或其他唯一字段替代）。
2. 点击逻辑更新：点击卡片时，将当前项的唯一标识添加到selectedIds集合，确保只有当前卡片被标记。
3. 样式判断逻辑：渲染时通过selectedIds.has(item.id)判断当前卡片是否被点击过，单独应用灰色样式。
4. 可选持久化：添加localStorage相关逻辑，确保返回页面时之前的选中状态不会丢失。

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