让div select在reactjs using state中取消选择

Question

如何使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类，或者我也可以在其他地方使用它。

Answer 1

既然您已经在dataArray中存储了选定的筛选键，那么您可以使用下面的逻辑来确定是否显示或隐藏检查div。

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

这样，你使用的是已经存储在状态中的东西(并且会更新)，所以你不需要创建一个新的状态值来跟踪已经选择的过滤器选项。

Answer 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>