Dynami c Реагирует на пагинацию с помощью крючков - PullRequest
Новая
       57

Dynami c Реагирует на пагинацию с помощью крючков

0 голосов
/ 21 апреля 2020

Я реализовал простой компонент разбиения на страницы с использованием хуков, но теперь я хочу сделать динамическое разбиение на страницы c Я пробовал так много вещей, но ничего не работает

<1 2 3 4 5>

<2 3 4 5 6>

Я хочу реализовать что-то вроде этого. теперь все номера страниц отображаются, обратите внимание, что количество страниц исходит от конца 

import React, { useEffect, useState } from 'react';

const Pagination = ({ setCurrentPage, currentPage, pageCount }) => {

  const pageNumbers = [];

  const [styleClass, setStyleClass] = useState('active')

 
  for (var i = 1; i <=pageCount; i++) {
      pageNumbers.push(i)
  }

  function paginate(page) {
    if (page >= 1) {
      let pagenumber = page - 1
      setCurrentPage(pagenumber)
    }

  }


  function firstPage() {
    setCurrentPage(0)
  }

  function lastPage() {
    setCurrentPage(pageCount - 1)
  }

  function next() {
    if (pageNumbers.length - 1 > currentPage) {
      let page = currentPage;
      let next = page + 1;
      setCurrentPage(next)
    }
  }

  function back() {
    if (currentPage >= 1) {
      let page = currentPage;
      let back = page - 1;
      setCurrentPage(back)
    }
  }

  return (
    <div className="pagination">
      <a onClick={() => { firstPage() }} >First</a>
      <a onClick={() => { back() }} >&laquo;</a>
      {
        pageNumbers.map(page => {
          return (
            <a key={page} onClick={() => { paginate(page) }} className={page - 1 === currentPage ? styleClass : ''} >{page}</a>
          )
        })
      }
      <a onClick={() => { next() }} >&raquo;</a>
      <a onClick={() => { lastPage() }}>Last</a>
    </div>
  );
};

export default Pagination;
...