带有 React useState 挂钩的复选框 table 过滤器 - 映射数组以过滤 table
Checkbox table filter with React useState hook - map over array to filter table
我正在尝试使用 React 挂钩为 Material Ui table 实现复选框过滤器。我的目标是映射过滤值数组,如果行对象与任何过滤值匹配,则过滤 table 数据。
例如,如果我 select/check 2 个过滤器值,我想将过滤器值与相应的行对象 属性 进行比较,如果 属性,则将行数据添加到新数组=] 匹配其中一个过滤器值。
下面是我的进度。
Table.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()
已更改的值,以及是否选中或未选中(例如,(red, true))
期望输出
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));
}
我正在尝试使用 React 挂钩为 Material Ui table 实现复选框过滤器。我的目标是映射过滤值数组,如果行对象与任何过滤值匹配,则过滤 table 数据。
例如,如果我 select/check 2 个过滤器值,我想将过滤器值与相应的行对象 属性 进行比较,如果 属性,则将行数据添加到新数组=] 匹配其中一个过滤器值。
下面是我的进度。
Table.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()
已更改的值,以及是否选中或未选中(例如,(red, true))
期望输出
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));
}