React.js实现分类按钮点击切换高亮、支持多选的功能问题

核心逻辑 #

通过数组类型的状态存储已选中的分类ID，点击时切换ID在数组中的存在状态，动态绑定高亮样式即可实现需求。

具体实现步骤 #

1. 新增选中状态
   在组件内声明状态存储已选中的分类ID，初始值为空数组：

import { useState } from 'react'

// 组件内代码
const [selectedCategories, setSelectedCategories] = useState([])

2. 修改点击事件逻辑
   点击按钮时切换当前分类ID的选中状态，同时同步业务需要的values对象：

<div className={classes.scrollMenu}>
  {categories.map((category) => {
    return (
      <Button
        key={category._id}
        // 动态绑定样式：已选中则追加高亮类
        className={`${classes.button} ${selectedCategories.includes(category._id) ? classes.activeBtn : ''}`}
        onClick={() => {
          let newSelectedList
          if (selectedCategories.includes(category._id)) {
            // 已选中则取消，过滤掉当前ID
            newSelectedList = selectedCategories.filter(id => id !== category._id)
          } else {
            // 未选中则添加，把当前ID加入数组
            newSelectedList = [...selectedCategories, category._id]
          }
          // 更新状态
          setSelectedCategories(newSelectedList)
          // 同步业务所需的values参数
          const values = {
            price: [],
            category: newSelectedList
          }
          // 这里可补充你后续处理values的业务逻辑，比如查询接口调用等
        }}
      >
        {category.name}
      </Button>
    )
  })}
</div>

3. 补充高亮样式
   在你的样式文件中新增高亮类的对应样式，和设计稿匹配即可：

.activeBtn {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  /* 按需补充边框、圆角等其他样式 */
}

效果预览 #

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