封装一个好用的React+Antd 分页组件

> Antd分页组件

在后台开发中遇到一些坑，对此做了一些优化，封装了一个组件供大家批评指正！

可基本满足大部分需求，截图如下：

具体代码如下：

import React, { useState, useEffect } from 'react';
import { Pagination, Button, Input, message, Select } from 'antd';
import './index.less';

const { Option } = Select;    
const defaultPageSizeOptions = [10, 20, 30, 40];

export default function MedPagination (props) {
  const [pageInfo, setPageInfo] = useState({pageNum: props.current, pageSize: props.pageSize, total: props.total})
  const [jumpText, setJumpText] = useState('');
 
  useEffect(() => {
    setPageInfo({pageNum: props.current, pageSize: props.pageSize, total: props.total});
    setJumpText('');
  }, [props.current, props.pageSize, props.total])

  const jump = () => {
    if (isNaN(Number(jumpText)) || ~jumpText.indexOf('.')) {
      message.warning('跳转的页码必须是整数');
      setJumpText('');
      return;
    }
    let pageNumber = Number(jumpText);
    if (pageNumber <= 0) {
      message.warning('跳转的页码必须大于0');
      setJumpText('');
      return;
    }
    if (pageNumber > Math.ceil(pageInfo.total / pageInfo.pageSize)) {
      message.warning('跳转的页码超过了总页数');
      setJumpText('');
      return;
    }
    props.onChange(pageNumber, props.pageSize);
    setJumpText('');
  }
  
  const selectPageSize = (val) => {
    let pageNumber = Math.ceil((props.pageSize * (props.current - 1) + 1) / val);
    props.onChange(pageNumber, Number(val));
  };
  
  return (
  <div className="med-pagination">
    <span className="med-pagination-total-text">
      共有{pageInfo.total}条，每页显示
      <Select
        style={{width: 60, margin: '0 8px'}}
        value={props.pageSize}
        onChange={selectPageSize}
      >
        {
          props.pageSizeOptions ? props.pageSizeOptions.map((item) => {
            return <Option value={item}>{item}</Option>
          }) : defaultPageSizeOptions.map((item) => {
            return <Option value={item}>{item}</Option>
          })
        }
      </Select>
      条 
    </span>
    <Pagination
      {...props}
      current={pageInfo.pageNum}
      pageSize={pageInfo.pageSize}
      total={pageInfo.total}
      showQuickJumper={false}
      showSizeChanger={false}
      // onChange={pageChange}
    />
    <span className="med-pagination-now-page">
      <span style={{color: '#009FD4'}}>{pageInfo.pageNum}</span> / {Math.ceil(pageInfo.total / pageInfo.pageSize)}
    </span>
    到第<Input style={{width: 40, margin: '0 8px'}} value={jumpText} onChange={(ev) => {setJumpText(ev.target.value)}} />页
    <Button style={{marginLeft: 8}} onClick={jump}>确定</Button>
  </div>
  )
};