-1

问题描述

RT:最近在使用antd的时候,页面中有一个表格,下面是自带的分页,当点击一个按钮的时候,表格的数据更新,但是分页的按钮并不会回到第一页,还停留在之前的位置

如下图:

clipboard.png

点击按钮,数据更新,这个页码应该重置到1页。

相同的问题还有输入框中的数据,也不会重置。

补充:

点击按钮后,使用的是react-router v4 url是会改变的。

有什么好的办法的?
感谢。

补充--------------------------------------------------------------------

代码其实也什么看的。就那antd文档中的例子来说吧。

import React from 'react'
import ReactDOM from 'react-dom';
import { Table, Icon, Divider } from 'antd';

class MyTable extends React.Component {
    constructor(){
        super()
        this.state={
            tabledata:[{
                  key: '1',
                  name: 'John Brown',
                  age: 32,
                  address: 'New York No. 1 Lake Park',
                }, {
                  key: '2',
                  name: 'Jim Green',
                  age: 42,
                  address: 'London No. 1 Lake Park',
                }, {
                  key: '3',
                  name: 'Joe Black',
                  age: 32,
                  address: 'Sidney No. 1 Lake Park',
                }]
        }
    }

    onClick(e){
        this.setState({
            tabledata:[{
                  key: '1',
                  name: 'Jaaaaaaa',
                  age: 32,
                  address: 'New York No. 1 Lake Park',
                }, {
                  key: '2',
                  name: 'Jiaaaaaa',
                  age: 42,
                  address: 'London No. 1 Lake Park',
                }, {
                  key: '3',
                  name: 'Jaaaaaaaaa',
                  age: 32,
                  address: 'Sidney No. 1 Lake Park',
                }],
        })
    }
    render(){
        const columns = [{
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          render: text => <a href="javascript:;">{text}</a>,
        }, {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        }, {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        }];
        return(
            <div>
                <input type = 'button'value='切换数据' onClick={this.onClick.bind(this)}/>
                <Table columns={columns} dataSource={this.state.tabledata} pagination={{defaultPageSize:"1"}}/>
            </div>
            )
    }
}

ReactDOM.render(<MyTable />, document.getElementById('root'));

很简单的例子,页面中有一个表格和一个按钮,点击按钮,更改表格中的数据。

问题来了:
我点击到第二页,如图

clipboard.png

再点击切换数据的按钮,切换数据后:

clipboard.png

数据是被切换了,但是 分页的这个还停留在第二页

终极问题:

这么说吧,意思是react中,当我们进行一次操作后,这么让组件恢复到最初始的状态。
如果可以,使用上面的例子分析一下。
感谢
累。

sunqi 34
2018-07-10 提问
2 个回答
1

已采纳

谢邀,table 支持 pagination 接口。你需要在 state 中添加 pagination 属性并加以控制,然后传给 table props。更新数据后将 pagination.current1 。这个文档描述确实有些含糊,当时也是翻了几遍才明白。

0

你不把代码贴出来,我们脑补来帮你改吗

撰写答案

你可能感兴趣的

推广链接