4

我目前正在使用React-Table，它运行良好。

我想根据表中过滤的数据有一个动态的pageSize 。

<ReactTable
    ...
    filtered={[{
             "id": "stage",
             "value": 1
           }]}

    getTdProps={(state, rowInfo, column, instance) => {
        return {
            onClick: () =>
                this.setState({
                  preliminary:state.sortedData.length
                })
            };
        }}
    pageSize={this.state.preliminary}
/>

我在构造函数中的状态

this.state = {
    preliminary: 10
};

由于该onClick()事件，这在单击时效果很好。我希望它触发onLoad()页面。更改onClick()为onLoad()没有任何作用。

任何帮助表示赞赏！

4

2 回答 2

3

向方法中添加onLoad事件getTdProps()没有多大意义，因为td元素没有onload事件。

听起来你会想要使用onFilteredChange更新this.state.preliminary到一个新值，这将更新组件的pageSize道具<ReactTable />。

这是一个简化的例子。该表以 5 开头pageSize。在任一列中插入任何类型的过滤器都会将其更改pageSize为 10。这使用了onFilteredChangedprop。我想您可能希望在handleFilterChange函数中包含一些逻辑来将 设置pageSize为适当的值。

class MyTable extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      pageSize: 5,
      filter: false
    }
  }
  
  handleFilterChange = (column, value) => {
    this.setState({
      pageSize: 10
    })
  }

  render() {
    const data = [{
      name: 'Tanner Linsley',
      age: 26
    },
    {
      name: 'Brett DeWoody',
      age: 38
    },
    {
      name: 'Santa Clause',
      age: 564
    }]

    const columns = [{
        Header: 'Name',
        accessor: 'name' // String-based value accessors!
      }, {
        Header: 'Age',
        accessor: 'age',
        Cell: props => <span className = 'number'> {
          props.value
        } </span> 
      }]

      return (
         <div>
         <ReactTable.default 
           data={data} 
           columns={columns} 
           filterable={true}
           onFilteredChange={this.handleFilterChange}
           pageSize={this.state.pageSize} />
         </div>
      )
  }
}

ReactDOM.render(<MyTable /> , document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.7.5/react-table.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.7.5/react-table.css" rel="stylesheet" />

<div id="app"></div>

于 2017-12-19T17:53:44.533 回答
1

遵循@Brett DeWoody 的建议，解决方案是找到过滤数据的长度

为此，我使用了 lodash

pageSize={_.filter(data.items, { 'stage': 1, 'status': 1 }).length}

谢谢！

于 2017-12-21T11:54:17.610 回答