Example of writing a paging component using react

This article mainly introduces you to using react to write a paging component (summary). I hope it can help you learn to use react to write a paging component. Let's learn it together.

Screenshot of the effect (the style can be modified by yourself):

Build the project

create-react-app react-paging-component

Paging component

1. Subcomponent

Create Pagecomponent.js file

Core code:

Initialization value

 constructor(props) {
    super(props)
    this.state = {
      currentPage: 1, //当前页码
      groupCount: 5, //页码分组，显示7个页码，其余用省略号显示
      startPage: 1, //分组开始页码
      totalPage:1 //总页数
    }
  }

Dynamic generation page number function

##

createPage() {
    const {currentPage, groupCount, startPage,totalPage} = this.state;
    let pages = []
    //上一页
    pages.push(<li className={currentPage === 1 ? "nomore" : null} onClick={this.prePageHandeler.bind(this)}
            key={0}>
      上一页</li>)

    if (totalPage <= 10) {
      /*总页码小于等于10时，全部显示出来*/
      for (let i = 1; i <= totalPage; i++) {
        pages.push(<li key={i} onClick={this.pageClick.bind(this, i)}
                className={currentPage === i ? "activePage" : null}>{i}</li>)
      }
    } else {
      /*总页码大于10时，部分显示*/

      //第一页
      pages.push(<li className={currentPage === 1 ? "activePage" : null} key={1}
              onClick={this.pageClick.bind(this, 1)}>1</li>)

      let pageLength = 0;
      if (groupCount + startPage > totalPage) {
        pageLength = totalPage
      } else {
        pageLength = groupCount + startPage;
      }
      //前面省略号(当当前页码比分组的页码大时显示省略号)
      if (currentPage >= groupCount) {
        pages.push(<li className="" key={-1}>···</li>)
      }
      //非第一页和最后一页显示
      for (let i = startPage; i < pageLength; i++) {
        if (i <= totalPage - 1 && i > 1) {
          pages.push(<li className={currentPage === i ? "activePage" : null} key={i}
                  onClick={this.pageClick.bind(this, i)}>{i}</li>)
        }
      }
      //后面省略号
      if (totalPage - startPage >= groupCount + 1) {
        pages.push(<li className="" key={-2}>···</li>)
      }
      //最后一页
      pages.push(<li className={currentPage === totalPage ? "activePage" : null} key={totalPage}
              onClick={this.pageClick.bind(this, totalPage)}>{totalPage}</li>)
    }
    //下一页
    pages.push(<li className={currentPage === totalPage ? "nomore" : null}
            onClick={this.nextPageHandeler.bind(this)}
            key={totalPage + 1}>下一页</li>)
    return pages;

  }

Page click function:

//页码点击
  pageClick(currentPage) {
    const {groupCount} = this.state
    const getCurrentPage = this.props.pageCallbackFn;
    //当 当前页码 大于 分组的页码 时，使 当前页 前面 显示 两个页码
    if (currentPage >= groupCount) {
      this.setState({
        startPage: currentPage - 2,
      })
    }
    if (currentPage < groupCount) {
      this.setState({
        startPage: 1,
      })
    }
    //第一页时重新设置分组的起始页
    if (currentPage === 1) {
      this.setState({
        startPage: 1,
      })
    }
    this.setState({
      currentPage
    })
    //将当前页码返回父组件
    getCurrentPage(currentPage)
  }

Previous page and Xiaye click events

//上一页事件
  prePageHandeler() {
    let {currentPage} = this.state
    if (--currentPage === 0) {
      return false
    }
    this.pageClick(currentPage)
  }

  //下一页事件
  nextPageHandeler() {
    let {currentPage,totalPage} = this.state
    // const {totalPage} = this.props.pageConfig;
    if (++currentPage > totalPage) {
      return false
    }
    this.pageClick(currentPage)
  }

The component is rendered to the DOM

render() {
    const pageList = this.createPage();
    return (
      <ul className="page-container">
        {pageList}
      </ul>
    )
  }

2. Parent component

Create Pagecontainer. js file

Complete code of parent component

##

import React, {Component} from 'react'
import Pagecomponent from '../components/Pagecomponent'
import data from '../mock/tsconfig.json'

class Pagecontainer extends Component {
  constructor() {
    super()
    this.state = {
      dataList:[],
      pageConfig: {
        totalPage: data.length //总页码
      }
    }
    this.getCurrentPage = this.getCurrentPage.bind(this)
  }
  getCurrentPage(currentPage) {
    this.setState({
      dataList:data[currentPage-1].name
    })
  }
  render() {
    return (
      <p>
        <p>
          {this.state.dataList}
        </p>
        <Pagecomponent pageConfig={this.state.pageConfig}
                pageCallbackFn={this.getCurrentPage}/>
      </p>

    )
  }
}
export default Pagecontainer

Related recommendations:

##jQuery Detailed explanation of the encapsulated paging component

Paging component implemented using vue2.0

Implementation method of table paging component based on vue2

The above is the detailed content of Example of writing a paging component using react. For more information, please follow other related articles on the PHP Chinese website!