我无法设置哪些元素将显示在 js 分页反应的页面上

Question

我尝试过分页，但没有成功。我想我不知道 json 的数据会出现多少页。

下面是我尝试做的示例的link。

感谢那些感兴趣的人。

https://codesandbox.io/embed/kategori-detay-pagination-zpzdt

 handlePageChange(pageNumber) {
    console.log(`active page is ${pageNumber}`);
    this.setState({ activePage: pageNumber });
  }

 <Pagination
          prevPageText="prev"
          nextPageText="next"
          firstPageText="first"
          lastPageText="last"
          pageRangeDisplayed={10}
          activePage={this.state.activePage}
          itemsCountPerPage={10}
          totalItemsCount={totalPosts}
          pageRangeDisplayed={10}
          onChange={this.handlePageChange}
        />

Answer 1

您没有使用正确的 'this'

绑定函数 handlePageChange()

constructor(props) {
    super(props);
    this.state = {
      CategorySlug: "",
      CategoryBrief: [],
      Posts: []
    };

    // Need to bind the function to proper context
    this.handlePageChange = this.handlePageChange.bind(this);
}

handlePageChange(pageNumber) {
    console.log(`active page is ${pageNumber}`);

    // Without binding, 'this' refers <Pagination /> instance
    // With binding, 'this' refers to current <PageCategoryDetail /> instance
    this.setState({ activePage: pageNumber });
}

或者，如果您愿意，可以使用更新的语法，这样就不必绑定每个功能单独

handlePageChange = (pageNumber) => {
    // Your code here
}

编辑

要显示items，根据选择的页面，需要操作Posts数组，过滤出需要的items

// You only filter by the selected Category, did not handle the paging
{Posts.filter(b => b.CategoryName === CategorySlug).map(item => (
   <li key={item.PostID}>{item.Title}</li>
))}

// You need further handle the pagination
const POST_PER_PAGE = 5
const pageOffset = this.state.activePage > 0 ? this.state.activePage - 1 : 0;
const startIndex = pageOffset * POST_PER_PAGE;
const endIndex = startIndex + POST_PER_PAGE;
{Posts.filter(b => b.CategoryName === CategorySlug).slice(startIndex, endIndex).map(item => (
   <li key={item.PostID}>{item.Title}</li>
))}

https://codesandbox.io/s/kategori-detay-pagination-f72px

我无法设置哪些元素将显示在 js 分页反应的页面上

I could not set which elements would display on the page in which js pagination react

pagination

reactjs

https://codesandbox.io/embed/kategori-detay-pagination-zpzdt