React中点击列表项显示选中勾选图标功能如何实现？

你可以通过存储当前激活的列表项唯一标识，渲染时做匹配判断来实现该效果，具体步骤如下：

步骤1：新增激活状态存储 #

你可以根据业务需求选择将激活状态存在组件内部，或者存到你正在使用的全局store中：

• 若仅当前组件需要用到激活状态，直接用组件内部state即可
• 若跨页面/组件需要保留激活状态，将状态存到全局store即可

下面以组件内部用useState存储为例：

import { useState } from 'react';

// 组件内部
// 这里用reportName作为唯一标识，你也可以换成你业务中收藏项的唯一id字段
const [activeFavoriteName, setActiveFavoriteName] = useState('');

步骤2：修改列表渲染逻辑 #

点击列表项时除了调用原有逻辑，同时更新激活状态，渲染时匹配当前项是否为激活项，是则显示勾选标识：

<div key="favorites-dropdown" className={styles.pushBtnDropDown}>
  <ul key="favorites-list">
    {
      favorites.map((favorite, idx) => {
        const isActive = activeFavoriteName === favorite.reportName;
        return (<li key={`favorite-${idx}`} className={isActive ? styles.activeLi : ''}>
          <a
            key={`favorite-a-${idx}`}
            tabIndex={idx}
            role="button"
            onClick={() => {
              store.setFavoriteFilters(favorite.reportName, favorite.filters);
              // 更新激活状态
              setActiveFavoriteName(favorite.reportName);
            }}
          >
            {favorite.name}
            {/* 激活状态下显示勾选图标，你可以替换成你的图标组件 */}
            {isActive && <span className={styles.checkIcon}>✓</span>}
          </a>
        </li>);
      })
    }
  </ul>
</div>

步骤3：补充对应样式 #

你可以根据设计需求补充激活项的样式，示例样式参考：

/* 勾选图标右对齐 */
.checkIcon {
  float: right;
  color: #1677ff;
  font-weight: bold;
}

/* 激活项背景高亮，可选 */
.activeLi {
  background-color: #f5f5f5;
}

如果你需要把激活状态存到全局store，只需要把useState换成你store中对应的状态和更新方法即可，逻辑完全一致。

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