React Material UI 中如何标识Filter筛选器的选中状态

核心思路 #

React是状态驱动UI的框架，你之前直接操作DOM修改样式，没有全局记录当前选中的分类，点击新分类时不会主动清除旧分类的样式，才会出现所有点击过的Chip都保留边框的问题。通过声明状态记录当前选中的分类，动态绑定Chip的样式即可实现选中态自动切换。

具体实现步骤 #

1. 新增状态存储当前选中分类
   先在组件内声明状态，初始值可设为默认选中的分类（比如全部类别"All"）：

   import { useState } from 'react';
   
   // 组件内部
   const [selectedCategory, setSelectedCategory] = useState("All");
   

2. 修改点击事件函数
   点击Chip时更新选中分类的状态，原有筛选逻辑可以保持不变：

   const handleCategoryChange = (e) => {
     const currentCategory = e.currentTarget.id;
     setSelectedCategory(currentCategory);
     // 这里保留你原本的筛选帖子的逻辑
   };
   

3. 动态绑定Chip的样式
   遍历渲染Chip时，判断当前分类是否和选中状态一致，匹配则应用选中样式：

   {cardCategories.map((cat) => {
     return (
       <Chip
         key={cat}
         style={{ 
           margin: "5px 5px 25px 5px",
           // 选中时加红色边框，否则用MUI outlined Chip默认边框
           border: selectedCategory === cat ? "1px solid red" : "1px solid rgba(0, 0, 0, 0.23)"
         }}
         label={cat}
         variant='outlined'
         clickable
         id={cat}
         onClick={handleCategoryChange}
       />
     );
   })}
   

可选优化 #

你也可以直接用Material UI Chip自带的属性实现选中态，更符合设计规范，不用自定义边框样式：

<Chip
  key={cat}
  style={{ margin: "5px 5px 25px 5px" }}
  label={cat}
  variant={selectedCategory === cat ? "filled" : "outlined"}
  color={selectedCategory === cat ? "primary" : "default"}
  clickable
  id={cat}
  onClick={handleCategoryChange}
/>

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