代码之家 › 专栏 › 技术社区 › SeaWarrior404

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

html-table web reactjs javascript

SeaWarrior404 · 技术社区 · 7 年前

Im使用React表来显示我从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个值,并且过滤器应基于选定的任何值工作)。由于Im使用React表格( https://react-table.js.org

2 回复 | 直到 7 年前

bh4r4th 7 年前

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

在您的专栏中:

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

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 }

    }

jonahe 7 年前

我还没用过图书馆,但听起来像这样的东西可以用

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