javascript - react 表事件

Question

我目前正在使用 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()什么都不做。

感谢任何帮助!

Answer 1

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

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

这是一个简化的例子。该表以 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>