javascript - 带有 React useState 钩子的复选框表过滤器 - 将数组映射到过滤表
问题描述
我正在尝试使用 React 钩子为 Material Ui 表实现复选框过滤器。我的目标是映射一组过滤器值,如果行对象与任何过滤值匹配,则过滤表数据。
例如,如果我选择/检查 2 个过滤器值,我想将过滤器值与相应的行对象属性进行比较,如果属性与其中一个过滤器值匹配,则将行数据添加到新数组中。
下面是我的进度。
表.js
// Set state using useState hook
const [filter, setFilter] = React.useState(null);
// Table data
tableData = [
{color: 'red', type:'fruit', name:'apple'},
{color: 'blue', type:'fruit', name:'blueberry'},
{color: 'green', type:'veg', name:'lettuce'},
{color: 'green', type:'veg', name:'celery'},
]
// Pull unique colors from global state
const uniqueColors = [...new Set(arr.map(item => item.color))]; // [red, blue, green]
// Handle checkbox filtering ... this is where I'm running into issues
function handleSelectFilter(option, checked) {
if(checked){
setFilter(option); // add option to filter array
let filterArr = tableData.filter(row => row.color == option);
}else{
//if unchecked, remove from filterArr and unfilter the table
let filterArr = tableData.filter(row => row.color !== option);
setFilter(filterArr);
}
}
...
return (
...
<Grid>
<FilterPopOver
options={uniqueColors}
onSelectFilter={handleSelectFilter}
/>
</Grid>
...
)
FilterPopover.js : onChange -- FilterPopover 组件只发送handleSelectFilter()
已更改的值,以及是否选中或未选中(例如,(红色,真))
期望的输出
filterArr=['red','green']
tableData = [
{color: 'red', type:'fruit', name:'apple'},
{color: 'green', type:'veg', name:'lettuce'},
{color: 'green', type:'veg', name:'celery'},
]
解决方案
您可以使用includes()方法检查所选过滤器数组中是否存在项目的颜色。
现场示例:
var tableData = [
{color: 'red', type:'fruit', name:'apple'},
{color: 'blue', type:'fruit', name:'blueberry'},
{color: 'green', type:'veg', name:'lettuce'},
{color: 'green', type:'veg', name:'celery'},
];
function filterData(tableData, filters) {
return tableData.filter(item => filters.includes(item.color));
}
console.log(filterData(tableData, ['red', 'green']));
从您的问题来看,目前尚不清楚是做什么setFilter()
的,但您可以执行如下所示的操作:
function handleSelectFilter(option, checked) {
if(checked) {
// Add option to filter array.
this.filterArr.push(option);
} else {
// Remove option from filter array.
this.filterArr = this.filterArr.filter(color => color !== option);
}
// Filter table data.
this.tableData = this.tableData.filter(item => filterArr.includes(item.color));
}
推荐阅读
- node.js - 每日或每月间隔的交易总额
- python - 如何使用元组键操作字典以输出熊猫数据框
- gerrit - Gerrit 到 Gerrit 复制无法查看参考/更改
- javascript - 多个数的最大公约数
- python - Python中的可变部分数组求和
- c# - 图像的 WPF 数据绑定列表视图
- node.js - nodejs 承诺异步等待顺序执行
- python - Django mod_wsgi:ImportError:没有名为“home”的模块
- javascript - 尝试使用 Node.js 和 mysql javascript 客户端连接到 MySQL 数据库
- java - Firebase 数据库以列表形式检索多个对象