Question

如何设置过滤？我创建了一个列，并将其传递给ReactTable组件。接下来，我创建了一个过滤函数，用在想要的列中。

const columns = [{
    Header: 'Brand',
    accessor: 'brand',
    Cell: props => editableCell(props),
    Filter: selectColumnFilter,
    filter: 'includes'
}]

const selectColumnFilter = props => {
    const options = data.cars.filter((car, i) => {
        return i === data.cars.findIndex(obj => {
            return car[props.column.id] === obj[props.column.id];
        })
    }); // Gets the requested option values

    return <select onChange={e => {console.log(e.target.value)}}>
        <option value="">All</option>
        {options.map((option, i) => <option key={i} value={option[props.column.id]}>{option[props.column.id]}</option>)}
    </select> // Prints the select
}

在selectColumnFilter函数内部，我将列信息作为“ props”参数传递。从“道具”对象中获取“ id”并过滤汽车数组

return <ReactTable
    ref={(r) => setReactTable(r)}
    data={data.cars} 
    columns={columns} 
    filterable={filterable}
    pages={pages}
    loading={loading}
    defaultPageSize={pageSize}
    className="-striped -highlight"
/>

现在，我只需要弄清楚如何将值设置为“过滤”值，然后更新表视图。

Answer 1

最后才知道。

过滤器将“ props”对象传递到自定义过滤器（在本例中为“ selectColumnFilter”）。

我要做的就是将props的onChange方法附加到返回的元素（在本例中为select元素）

const selectColumnFilter = props => {
    const options = data.cars.filter((car, i) => {
      return i === data.cars.findIndex(obj => {
        return car[props.column.id] === obj[props.column.id];
    })
  });

  // attach the onChange method from props's object to element
  return <select onChange={(e) => props.onChange(e.target.value)}>
    <option value="">All</option>
    {options.map((option, i) => <option key={i} value={option[props.column.id]}> 
    {option[props.column.id]}</option>)}
  </select>
}

请记住将元素的值传递给onChange方法，否则您的表不会被过滤和更新。

Answer 2

我不知道数据来自哪里，但你可以试试这个：

function SelectColumnFilter({
  column: { filterValue, setFilter, preFilteredRows, id },
}) {
  // Calculate the options for filtering
  // using the preFilteredRows
  const options = React.useMemo(() => {
    const options = new Set()
    preFilteredRows.forEach(row => {
      options.add(row.values[id])
    })
    return [...options.values()]
  }, [id, preFilteredRows])

  // Render a multi-select box
  return (
    <select
      value={filterValue}
      onChange={e => {
        // this line will set filter value
        setFilter(e.target.value || undefined) 
      }}
    >
      <option value="">All</option>
      {options.map((option, i) => (
        <option key={i} value={option}>
          {option}
        </option>
      ))}
    </select>
  )
}

如何在ReactTable中设置自定义过滤？

2 个答案: