• react+antd分页 实现分页及页面刷新时回到刷新前的page


    antd框架地址:https://ant.design/index-cn

    利用antdUI框架做了个分页,其他功能都没问题,但是页面跳转后刷新会回到第一页,经过学习,在组件里增加了hash值,详情请看代码,实现了页面跳转后刷新依然显示刷新前的页面。

    import React from 'react'
    import { Pagination, Spin } from 'antd'  //引入分页组件
    import 'whatwg-fetch'
    import './agricultural.less'
    
    class Agricultural extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          agriculturalList: [],
          currentData: [],
          total: 0,
          pageSize: 3,
          pageNumber: parseInt(window.location.hash.slice(1), 0) || 1 //获取当前页面的hash值,转换为number类型
        }
        // 在react中点击事件里面 setState 时会使this重新定义,所以在点击的函数里面使用this.setState()时会报错this.setState not a function,因此需要提前给点击事件的函数绑定this
        this.onPageChange = this.onPageChange.bind(this);
        this.createMarkup = this.createMarkup.bind(this);
      }
      componentDidMount() {
        this.handleAnchor() //页面刷新时回到刷新前的page
      }
      handleAnchor() {
        this.onPageChange(this.state.pageNumber, this.state.pageSize); //手动调用onPageChange,传入当前页数和每页条数
      }
      
      onPageChange(page, pageSize) {
        this.setState({
          pageNumber: page
        }, () => {
          window.location.hash = `#${page}`; //设置当前页面的hash值为当前page页数
        })
      }
    
      render() {
        const agriculturalListData = this.state.currentData;return (
            <div className="agricultural-layout">
             // 你要显示的数据内容

    //分页实现

    <div className="pagination">
    <Pagination
    className="pagination-com"
    showQuickJumper
    hideOnSinglePage={ true }
    defaultCurrent={ this.state.pageNumber }
    current={ this.state.pageNumber }
    total={ this.state.total }
    pageSize={ this.state.pageSize }
    onChange={ this.onPageChange }
    showTotal={ (e) => {
    return "Total " + e + " items"
    } } />
    </div>
    </div>


    </div> ) } } export default Agricultural;

  • 相关阅读:
    【Web技术】(一)IIS Web服务器的安装与配置
    《数据结构课程设计》图结构练习:List Component
    ExcelUtils 导表实例
    SSH整合常见错误
    mysql索引优化
    数据库三范式
    sql联接那点儿事儿
    面试java简答题
    集合类框架
    数据库连接类oracleHelper
  • 原文地址:https://www.cnblogs.com/cristina-guan/p/9556274.html
Copyright © 2020-2023  润新知