Question

我正在尝试使用React挂钩为Material Ui表实现复选框过滤器。我的目标是映射一个过滤器值数组，并在行对象与任何过滤后的值匹配时对表数据进行过滤。

例如，如果我选择/选中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()发送已更改的值，以及是否已选中或未选中的值（例如，（红色，真））

所需的输出

 filterArr=['red','green']

 tableData = [
   {color: 'red', type:'fruit', name:'apple'},
   {color: 'green', type:'veg', name:'lettuce'},
   {color: 'green', type:'veg', name:'celery'},
 ]

Answer 1

您可以使用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 useState钩子的复选框表过滤器-将数组映射到过滤器表

1 个答案: