如何在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个值，并且过滤器应基于所选的任何值工作）。由于我使用React Table（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})

在render（）内部，将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 }

    }