React中使用state实现类复选框div的选中与取消选中功能

你已经在全局Context中维护了选中筛选项的数组dataArray，增删操作也已经同步更新了该数组，直接基于该数组判断当前项是否选中即可，不需要额外新增状态，且该状态全局可访问，其他组件都可以直接从Context中读取dataArray使用。

具体修改步骤 #

1. 先在对应样式文件中新增筛选框选中态的样式类，示例如下：

/* 选中态样式，可根据你的设计需求调整 */
.filter-check.filter-checked {
  background-color: #2563eb;
  border-color: #2563eb;
  /* 如果需要打勾可以加伪元素 */
  position: relative;
}
.filter-check.filter-checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

2. 修改组件中渲染筛选项的逻辑，动态给filter-check绑定选中类名，同时补全代码中缺失的search状态定义：

import React, { useContext, useRef, useState, useEffect } from "react";
import useOnClickOutside from "hooks/outsideClick";
import DataProvider from "context/DataContext";

import filterData from "config/constants";

export default function FilterDropdown() {
  const ref = useRef();
  // 补全缺失的search状态
  const [search, setSearch] = useState('');
  const {
    filter,
    setFilter,
    dataArray,
    setDataArray,
    checkArray,
    setCheckedArray,   
  } = useContext(DataProvider);
  const showFilter = () => setFilter(!filter);

  const handleFilterValues = (meta_name, meta_value) => {
    const index = dataArray.findIndex(({ value }) => value === meta_value);
    const data = [...dataArray];

    if (index > -1) {
      data.splice(index, 1);
    } else {
      const entry = { name: meta_name, value: meta_value };
      data.push(entry);
    }
    setDataArray(data);
  };

  console.log(dataArray);

  return (
    <div className="hs-unfold ml-3">
      <div
        id="usersFilterDropdown"
        style={{
          minWidth: "20rem",
        }}
        className={`dropdown-unfold dropdown-menu dropdown-menu-sm-right dropdown-card card-dropdown-filter-centered ${filter ? "hs-unfold-content-active" : "hs-unfold-content"}`}
        ref={ref}
      >
        <div className="card">
          <div className="card-body-filter">           
            <div className="filter-tabs">
              <ul className="screen-options-list">
                {filterData.map((filter, index) => {
                  return (
                    <React.Fragment key={index}>
                      <li className="list-option">
                        <small className="nav-subtitle d-block">
                          {filter.value}
                        </small>
                      </li>
                      {filter.data
                        .filter((val) => {
                          if (search == "") {
                            return val;
                          } else if (
                            val.value
                              .toLowerCase()
                              .includes(search.toLowerCase())
                          ) {
                            return val;
                          }
                        })
                        .map((f, i) => {
                          return (
                            <div
                              className="filter-dropdown-side"
                              key={i}
                              onClick={() => handleFilterValues(filter.key, f.key)}
                            >
                              {/* 核心修改：动态绑定选中类 */}
                              <div className={`filter-check ${dataArray.some(item => item.value === f.key) ? 'filter-checked' : ''}`}></div>
                              <li className="filter-value">{f.value}</li>
                            </div>
                          );
                        })}
                    </React.Fragment>
                  );
                })}
              </ul>
            </div>            
          </div>
        </div>
      </div>
    </div>
  );
}

如果需要在其他位置使用选中状态，直接从Context中取出dataArray，用some/find方法判断对应项是否在数组中即可。

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