Question

我有以下代码：

import React, { Component } from 'react'
import Box from './Box'

// Styles
import '../../App.css'

class Container extends Component {
    constructor(props) {
        super(props)
        this.state = {
            page: 0
        }
    }

    showPreviousPage = () => {
        this.setState({ page: this.state.page - 1 })
    }

    showNextPage = () => {
        this.setState({ page: this.state.page + 1 })
    }

    render () {
        const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

        const itemsToDisplay = 9

        const startIndex = this.state.page * itemsToDisplay;

        const visibleItems = items.slice(startIndex, startIndex + itemsToDisplay)

        return (
            <div>
                <div className="box-container">
                    {visibleItems.map(id => <Box id={id} key={id} />)}
                </div>
                <div className="main-pagination">
                    <div className="pagination">
                        <button onClick={this.showPreviousPage}>Previous Page</button>
                        <button onClick={this.showNextPage}>Next Page</button>
                    </div>
                </div>
            </div>
        )
    }
}

export default Container

代码完美呈现了我想要呈现的<Box>组件，每页9个组件。但是，我在这里有两个问题：

如何实施＆＃34;停止＆＃34;机制，以便当用户到达最终页面时，<Next Page>按钮变为非活动状态（并且<Previous Page>应在第一页上处于非活动状态）？
如何在<Previous Page>和<Next Page>按钮之间添加10个页码？因此当用户到达第10页时，它看起来<Previous Page> 1 2 3 4 5 6 7 8 9 10 <Next Page>，并更新为11 12 ....

Answer 1

您可以使用react-js-pagination来提供您需要的功能。

您只需要通过npm安装它并替换您的分页代码

<div className="main-pagination">
      <div className="pagination">
           <button onClick={this.showPreviousPage}>Previous Page</button>
            <button onClick={this.showNextPage}>Next Page</button>
      </div>
</div>

与

<Pagination
          activePage={this.state.activePage}
          itemsCountPerPage={10}
          totalItemsCount={450}
          pageRangeDisplayed={5}
          onChange={yourOnChangeMethod}
        />

更改页面时更改项目可以使用onChange方法完成。并且您可以使用您的州轻松设置分页。

将页码添加到分页

1 个答案: