时间戳

首页 > 解决方案 > 如何在 ReactTable 中设置自定义过滤？

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

问题描述

如何设置过滤？我创建了一列并将其传递给 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参数传递。从props对象中我获取id和过滤汽车数组

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

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

标签： reactjsreact-table

解决方案

最后才想通。

过滤器将props对象传递给自定义过滤器（在这种情况下selectColumnFilter）。

我所要做的就是将道具的 onChange 方法附加到返回的元素（在本例中为选择元素）

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 方法，否则您的表格不会被过滤和更新。

推荐阅读