сделайте выбор div отмененным в reactjs, используя состояние

#javascript #reactjs

Вопрос:

Как я могу заставить 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 классом с помощью переменной состояния или использовать его где-нибудь еще.

Ответ №1:

Поскольку вы уже храните выбранные ключи фильтра dataArray , вы можете использовать приведенную ниже логику, чтобы определить, показывать или не скрывать div проверки.

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

Таким образом, вы используете то, что уже хранится в состоянии (и будет обновляться как таковое), поэтому вам не нужно создавать новое значение состояния, чтобы отслеживать, какие параметры фильтра были выбраны.

1. но я также хочу снять флажок с другого компонента..

2. @Gurupalsingh вы имеете в виду, что хотите сделать элемент filter-check общим компонентом, который будет использоваться отдельными компонентами, имеющими свои собственные значения состояния фильтра?

3. Нет, я хочу добавить состояние, которое вызывает true и false при добавлении и удалении элементов. Так как я хочу использовать это состояние и в другом месте .. например, если вы добавите какой-нибудь фильтр и покажете теги, на которых есть эта перекрестная кнопка.

Ответ №2:

Используйте атрибут tabindex

 div {
  border: 1px solid red;
  padding: .25em;
  cursor: pointer;
}

div:focus::after {
  content: ' is selected'
}

 <div tabindex="1">first</div>
<div tabindex="2">second</div>
<div tabindex="2">third</div>