时间戳

首页 > 解决方案 > 使用状态在reactjs中使div选择取消选择

javascript - 使用状态在reactjs中使div选择取消选择

问题描述

从数组中添加和删除项目时，如何使 div 选择和取消选择复选框。我的添加/删除功能工作正常，但我不知道如何控制视图。我制作了一个看起来像复选框的 div。

过滤器代码：-

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();
  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"
                              ></div>

                              <li className="filter-value">{f.value}</li>
                            </div>
                          );
                        })}
                    </React.Fragment>
                  );
                })}
              </ul>
            </div>            
          </div>
        </div>
      </div>
    </div>
  );
}

我想filter-check使用状态变量触发/控制类，或者我也可以在其他地方使用它。

标签： javascriptreactjs

解决方案

由于您已经在其中存储了选定的过滤器键，dataArray您可以使用以下逻辑来确定是否显示或隐藏检查 div。

<div className="filter-check"
     style={{
         display: dataArray.findIndex(({ value }) => value === f.key) > -1 
             ? 'block'
             : 'none'
     }}
></div>

这样您就可以使用已经存储在 state 中的东西（并且会更新），因此您不需要创建新的 state 值来跟踪已选择的过滤器选项。

推荐阅读