Добавление кнопок «Вперед» и «Предыдущий» с использованием response.js - PullRequest
Новая
       5

Добавление кнопок «Вперед» и «Предыдущий» с использованием response.js

1 голос
/ 21 октября 2019

Мне удалось разбить мои посты на страницы, но я не смог добавить кнопки вперед и назад и сделать их динамически, используя этот фрагмент кода: 

import React from 'react'

const Pagination = ({postsPerPage, totalPosts, paginate}) => {
    console.log(totalPosts)
    const PageNumbers = []

    const int = Math.ceil(totalPosts / postsPerPage)
    if (int === 1 ) return null 
    for (let i = 1; i<= int; i++) {
        PageNumbers.push(i) 
    }
    return (
        <nav aria-label="Page navigation example">
            <ul className="pagination">
                {PageNumbers.map(number=> (
                    <li key={number} className="page-item">
                        <a onClick={ ()=> paginate(number)} href="!#" className="page-link">
                            {number} 
                        </a>
                    </li>
                ))}
            </ul>
        </nav>
    )
}
export default Pagination

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

enter image description here

1 Ответ

1 голос
/ 21 октября 2019

Давайте присвоим вашему компоненту некоторое состояние, чтобы он мог знать текущую страницу и, следовательно, мог знать, как перейти на следующую страницу. Это должно быть довольно близко! 

import React, { useState } from 'react'

const Pagination = ({postsPerPage, totalPosts, paginate}) => {
    const [currentPage, setCurrentPage] = useState(0)

    console.log(totalPosts)
    const PageNumbers = []

    const int = Math.ceil(totalPosts / postsPerPage)
    if (int === 1 ) return null 
    for (let i = 1; i<= int; i++) {
        PageNumbers.push(i) 
    }
    return (
        <nav aria-label="Page navigation example">
            <ul className="pagination">
                {PageNumbers.includes(currentPage - 1) && <a onClick={() => {
                    setCurrentPage(currentPage - 1);
                    paginate(currentPage - 1);
                }}>}
                    Prev
                </a>
                {PageNumbers.map(number=> (
                    <li key={number} className="page-item">
                        <a onClick={()=> {
                            setCurrentPage(number)
                            paginate(number)
                        }} href="!#" className="page-link">
                            {number} 
                        </a>
                    </li>
                ))}
                {PageNumbers.includes(currentPage + 1) && <a onClick={() => {
                    setCurrentPage(currentPage + 1);
                    paginate(currentPage + 1);
                }}>}
            </ul>
        </nav>
    )
}
export default Pagination
...