如何在 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 }

    }

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