如何在React表中實現過濾邏輯？

Question

使用React Table來顯示我從API調用接收到的數據。目前我在本地保存狀態，表格顯示數據。我已經爲兩列添加了列值的過濾。我的過濾邏輯如下：

<ReactTable 
    data={tableData} 
    noDataText="Loading.." 
    filterable 
    defaultFilterMethod={(filter, row) => 
    String(row[filter.id]) === filter.value} 
    }; 
    }} 
    columns={[ 
    { 
     columns: [ 
     { 
      Header: 'Name', 
      accessor: 'Name', 
      id: 'Name', 
      Cell: ({ value }) => (value === 'group1' ? 
      'group1' : 'group2'), 
      filterMethod: (filter, row) => { 
      if (filter.value === 'all') { 
       return true; 
      } 
      if (filter.value === 'group1') { 
       return row[filter.id] === 'group1'; 
      } 
      if (filter.value === 'group2') { 
       return row[filter.id] === 'group2'; 
      } 
      }, 
      Filter: ({ filter, onChange }) => 
      <select 
       onChange={event => onChange(event.target.value)} 
       style={{ width: '100%' }} 
       value={filter ? filter.value : 'all'} 
      > 
       <option value="all">All</option> 
       <option value="group1">Group1</option> 
       <option value="group2">Group2</option> 
      </select>, 
     }, 
    } 

截至目前，過濾規則是硬兩個值之間編碼。如何實現過濾器邏輯以便過濾是動態的？（如果特定列中有3個或7個不同的值，則下拉列表應顯示全部7個值，並且過濾器應基於所選的任何值工作）。由於我使用反應表（https://react-table.js.org）。

Answer 1

我假設你想讓選項超出選項列表。 如果是這樣，這裏有一種方法可以做到這一點：

const exampleList = ['option1','option2','option3','option4',...,'option n'] 

在你列：

filterMethod: (filter, row) => customOptionsFilterMethod(filter, row), 
Filter:() => ({filter, onChange}) => customOptionsFilter({filter, onChange}) 

內部渲染（）實現customOptionsFilter和customOptionsFilterMethod爲：

const customOptionsFilter = ({filter, onChange}) => { 
     return(
     <select 
      onChange={e => onChange(e.target.value)} 
      style={{ width: '100%' }} 
      value={filter ? filter.value : 'all'} 
      > 
      <option value='all'>Show All</option> 
      { 
      exampleList.map(k => { 
       return <option key={k.toString()} value={k}>{k}</option> 
      }) 
      } 
     </select> 
    ) 
    } 



const customOptionsFilterMethod = (filter, row) => { 

     if(filter.value === '') { return true } 

     if(exampleList.includes(filter.value)){ 
     return row[filter.id] === filter.value 
     } else { return true } 

    } 

Answer 2

沒有使用圖書館，但它聽起來就有點像這樣的工作

if (filter.value === 'all') { 
    return true; 
} else { 
    // what ever the value is, we will only 
    // show rows that have a column value 
    // that matches it 
    // If value is 'group1' just show the ones where the column 
    // value is 'group1', etc etc. 
    return row[filter.id] == filter.value; 
} 

注意，這會顯示什麼，直到你得到一個精確匹配。所以即使你有像「group1」這樣的列值，搜索詞「grou」也不會匹配它。如果這是不是你想要的，然後的行爲，你會想轉出

return row[filter.id] == filter.value; 

喜歡的東西

return row[filter.id].indexOf(filter.value) >= 0; 

作爲替代，如果你需要它是比這更受限制，你可以從陣列中建立你的選擇

const options = [ { value: "all" , label: "All" }, { value: "group1" , label: "Group1" }]; 

而且使用它像

 <select 
      onChange={event => onChange(event.target.value)} 
      style={{ width: '100%' }} 
      value={filter ? filter.value : 'all'} 
     > 
      { options.map(({value,label}) => <option value={value}>{label}</option>)} 
     </select>, 

而在你的過濾邏輯，你可以檢查filter.value值是「options`陣列英寸

// check if there is some (any) value that matches the criteria 
// of opt.value == filter.value 
return options.some(opt => opt.value == filter.value);