26-分页器demo

第三节-事件属性demo-分页器

• 在React中,事件的本质就是一个函数

/* Pager.css */
.item {
    display: inline-block;
    text-decoration: none;
    padding: 6px 10px;
    border: 1px solid #ccc;
    margin: 2px;
    color: lightskyblue;
    cursor: pointer;
    user-select: none;
}

.item.disabled {
    color: #ccc;
    cursor: not-allowed;
}
.item.active {
    color: blue;
    border: none;
    cursor: auto;
}
.current {
    margin-left: 10px;
}

// Pager.jsx
import React, { useMemo } from "react";
import "./Pager.css";

/**
 * 分页组件
 * 属性
 * current: 初始页码
 * total: 总数据量
 * limit: 页容量
 * panelNumber: 数字页码最多显示多少个
 * onPageChange: 页码改变事件
 * @returns
 */
function Pager({ current, total, limit, panelNumber, onPageChange }) {
  const pageNumber = useMemo(() => Math.ceil(total / limit), [total, limit]);

  // 最小数字
  const min = useMemo(() => {
    let min = current - Math.floor(panelNumber / 2);
    if (min < 1) min = 1;
    return min;
  }, [current, panelNumber]);

  // => 最大数字
  const max = useMemo(() => {
    let max = min + panelNumber - 1;
    if (max > pageNumber) max = pageNumber;
    return max;
  }, [min, panelNumber]);

  const goFirst = () => {
    if (current === 1) return;
    onPageChange(1);
  };
  const goLast = () => {
    if (current === pageNumber) return;
    onPageChange(pageNumber);
  };
  const prev = () => {
    if (current === 1) return;
    onPageChange(current - 1);
  };
  const next = () => {
    if (current === pageNumber) return;
    onPageChange(current + 1);
  };

  const handle = (i, cur) => {
    console.log(i, cur);
    onPageChange(i);
  };

  const numbers = [];
  for (let i = min; i <= max; i++) {
    numbers.push(
      <span
        onClick={() => handle(i)}
        className={current === i ? "item active" : "item"}
        key={i}
      >
        {i}
      </span>
    );
  }

  return (
    <>
      <span
        onClick={() => goFirst()}
        className={current === 1 ? "item disabled" : "item"}
      >
        首页
      </span>
      <span
        onClick={() => prev()}
        className={current === 1 ? "item disabled" : "item"}
      >
        上一页
      </span>
      {/* 数字页面 */}
      {numbers}
      <span
        onClick={() => next()}
        className={current === pageNumber ? "item disabled" : "item"}
      >
        下一页
      </span>
      <span
        onClick={() => goLast()}
        className={current === pageNumber ? "item disabled" : "item"}
      >
        尾页
      </span>
      <span className="current">{current}</span>/<span>{pageNumber}</span>
    </>
  );
}

export default Pager;

// App.jsx
import { useState } from 'react'
import Pager from "./components/Pager"

function App() {
  const [data, setData] = useState({
    current: 3,
    total: 104,
    limit: 10,
    panelNumber: 5
  });
  const onPageChange = (current) => {
    setData({
      ...data,
      current
    })
  }

  return (
    <>
      <Pager 
        {...data}
        onPageChange={onPageChange}
      />
    </>
  )
}

export default App