Фильтр таблицы флажков с перехватом React useState - сопоставление массива с таблицей фильтров - PullRequest
Новая
       30

Фильтр таблицы флажков с перехватом React useState - сопоставление массива с таблицей фильтров

1 голос
/ 16 октября 2019

Я пытаюсь реализовать фильтры-флажки для таблицы Material Ui, используя перехватчики React. Моя цель - отобразить массив значений фильтра и отфильтровать данные таблицы, если объект строки соответствует любому из отфильтрованных значений.

Например, если я выбираю / проверяю 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() значение, которое было изменено, и если оно было проверено или не проверено (например, (красный, true))

Требуемый вывод 

 filterArr=['red','green']

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

1 Ответ

1 голос
/ 16 октября 2019

Вы можете использовать метод includes () , чтобы проверить, присутствует ли цвет элемента в выбранном массиве фильтров.

Live Пример: 

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));
}
...