定制一个自己项目里需要的分页器

效果图：

---

代码：

/**简易分页器组件
 * 
 * API:
 * @currentPage 当前页码
 * @pageSize 每页显示多少条
 * @total 数据总数
 * @onPageChange 当前页发生变化时触发的回调，参数是更新后的页码。子传父的关键。
 */

import React, { useState } from 'react'
import styles from './index.less'

const defaultCurrent = 1 // 默认当前页
const defaultPageSize = 20 // 默认每页20条数据
const defaultTotal = 0 // 默认总数为0
const valueLimit = /^\+?[1-9]\d*$/ // 限定输入页码为正整数

const Pagin = props => {

  let { currentPage, pageSize, total, onPageChange } = props

  currentPage = currentPage || defaultCurrent
  pageSize = pageSize || defaultPageSize
  total = total || defaultTotal

  const [current, setCurrent] = useState(currentPage)
  const [page, setPage] = useState(1)

  const handlePre = () => {
    if (onPageChange && current > 1) {
      onPageChange(current - 1)
      setCurrent(current - 1)
    } 
  }

  const handleNext = () => {
    if (onPageChange && current < Math.ceil(total / pageSize)) {
      onPageChange(current + 1)
      setCurrent(current + 1)
    }
  }

  const handleChange = e => {
    const val = e.target.value
    if (valueLimit.test(val) || val === '') {
      setPage(val)
    }
  }

  const jumpToPage = () => {
    if (onPageChange && page >= 1 && page <= Math.ceil(total / pageSize)) {
      onPageChange(page)
      setCurrent(Number(page))
    }
  }

  return <>
    {
      total > 0
      &&
      <div className={styles.pagin}>
        <div className={styles.left}>
          <div className={`${styles.pre} ${current <= 1 ? '' : styles.active}`} onClick={handlePre}>上一页</div>
            <div className={styles.current}>{current}</div>
          <div className={`${styles.next} ${current >= Math.ceil(total / pageSize) ? '' : styles.active}`} onClick={handleNext}>下一页</div>
        </div>
        <div className={styles.rig}>
            <span className={styles.total}>共{Math.ceil(total / pageSize)}页</span>
          <div className={styles.jump_wrap}>
            <span className={styles.jump_btn} onClick={jumpToPage}>前往</span>
            <input
              type="text"
              autoComplete='off'
              className={styles.jump_num}
              value={page}
              onChange={e => {handleChange(e)}}
            />
            <span>页</span>
          </div>
        </div>
      </div>
    }
  </>
}

export default Pagin

样式：

.pagin {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 38px;
  margin-top: 40px;
  box-sizing: border-box;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 400;
  color: #222;

  .left {
    width: 210px;
    display: flex;
    justify-content: space-between;

    .current {
      width: 38px;
      height: 100%;
      border-radius: 4px;
      text-align: center;
      line-height: 38px;
      color: #fff;
      background-color: #673ab7cc;
    }

    .pre, .next {
      width: 75px;
      height: 100%;
      text-align: center;
      line-height: 38px;
      color: #c0c4cc;
      background-color: #f4f4f5;
      border-radius: 4px;
      user-select: none;
      -webkit-user-select: none;
      cursor: not-allowed;
    
      &.active {
        color: #fff;
        background-color: #673ab7cc;
        cursor: pointer;
      }
    }
  }

  .rig {
    display: flex;
    align-items: center;
    gap: 10px;

    .jump_wrap {
      display: flex;
      gap: 3px;
      align-items: center;
      margin-top: 0;

      .jump_btn {
        color: #673ab7cc;
        user-select: none;
        -webkit-user-select: none;
        cursor: pointer;
      }

      .jump_num {
        width: 46px;
        height: 28px;
        text-align: center;
        color: #606266;
        border: 1px solid #dcdfe6;
        border-radius: 3px;
      
        &:focus {
          border: 1px solid #673ab7cc;
        }
      }
    }
  }
}

---

使用示例：

import React from 'react'
import styles from './index.less'
import Pagin from '@pages/pagin'

const App = () => {
	const onPageChange = (page) => {
	    console.log('page: ', page)
	}

	return <div>
		<Pagin onPageChange={onPageChange} total={41} />
	</div>
}