React-table 事件

Question

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

我想根据 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() 什么都不做。

感谢任何帮助！

Answer 1

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

听起来你会想利用 onFilteredChange 将 this.state.preliminary 更新为新值，这将更新 <ReactTable /> 组件的 pageSize 属性.

这是一个简化的例子。 table 以 pageSize 5 开头。在任一列中插入任何类型的过滤器都会将 pageSize 更改为 10。这使用了 onFilteredChanged 属性。我想你会想在 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>

Answer 2

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

为此，我使用了 lodash

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

谢谢！

React-table 事件

React-table events

javascript

reactjs

react-table