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 }

    }

Answer 2

Haven没有使用过该库，但听起来有点像这样的东西

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

请注意，这将显示任何内容，直到您获得完全匹配。所以，即使你有像＃34; group1＆＃34;搜索词＆＃34; grou＆＃34;不会匹配它。如果那不是你想要的行为，那么你想要转出

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

在您的过滤器逻辑中，您可以检查// check if there is some (any) value that matches the criteria // of opt.value == filter.value return options.some(opt => opt.value == filter.value);值是否在＆＃39; options`数组中。

{{1}}

如何在React表中实现过滤逻辑？

2 个答案: