使用 react.js 添加下一个和上一个按钮答案

【问题标题】：Adding next and prev buttons using react.js使用 react.js 添加下一个和上一个按钮
【发布时间】：2020-02-17 01:31:00
【问题描述】：

我成功为我的帖子分页，但无法添加下一个和上一个按钮并使用此代码 sn-p 动态生成它们：

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

请帮助找到将这些按钮包含在 next 和 prev 动态到我出现的分页的方法。它工作得很好，但需要下一个和上一个

【问题讨论】：

您必须维护当前页面的一些概念。你有办法找出你当前的页面吗？
看看：github.com/titanve/react-next-paging/blob/master/src/…

标签： reactjs pagination

【解决方案1】：

让我们给你的组件一些状态，这样它就可以知道当前页面，从而可以知道如何转到下一页。这应该让您非常接近！

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

【讨论】：