React列表项单选实现咨询：点击li触发过滤时如何设置单选

你的代码逻辑上已经实现了单选——每次点击li时，filters.category会被更新为当前项的取值，同一时刻category只会存储一个选中的分类值，所以数据层面已经是单选模式。但目前缺少视觉反馈，用户无法直观看到哪个li处于选中状态，需要补充这部分实现。

1. 添加选中状态的视觉标识 #

给当前选中的li添加专属样式类，通过判断filters.category与li的取值是否匹配来动态设置类名：

// 先定义分类数组，避免重复代码
const categories = [
  'Access Control System',
  'Accessories',
  'Auto Door System',
  'Backup Battery',
  'Card & Weigand Reader',
  'CCTV Recorders',
  'CCTV Security Camera System',
  'Display Monitor',
  'Draka Cable',
  'IP PBX System'
];

// 渲染部分用map循环生成li
<ul>
  {categories.map(category => (
    <li
      key={category}
      onClick={makeFilter('category', category)}
      className={filters.category === category ? 'selected' : ''}
    >
      {category}
    </li>
  ))}
</ul>

然后在CSS中定义选中样式：

.selected {
  background-color: #f0f0f0;
  font-weight: 600;
  color: #2196f3;
  /* 可根据需求调整样式 */
}

2. 优化makeFilter函数（可选但推荐） #

由于React的setState是异步操作，使用函数式更新可以确保拿到最新的state值，避免闭包导致的状态更新异常：

const makeFilter = (property, newFilterValue) => () => {
  setFilters(prevFilters => ({
    ...prevFilters,
    [property]: newFilterValue,
  }));
};

效果说明 #

完成以上修改后，点击任意li时：

• 数据层面：filters.category会被设置为当前li的分类值，自动覆盖之前的选中项，实现单选逻辑
• 视觉层面：被选中的li会应用selected样式，用户能清晰看到当前选中的分类

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