Reactstrap分页下一项未呈现

时间:2019-10-31 13:13:47

标签: reactjs pagination

我试图将React表带分页动态地实现到我的表数据中。这是我到目前为止所取得的成就:


class TestPagination extends Component {
  constructor(props) {
    super(props);

    this.state = {
      currentPage: props.currentPage
    };
  }

  handleClick = (e, index) => {
    e.preventDefault();

    this.setState({
      currentPage: index
    });
  };

  render() {
    const { pageSize, pageCount, currentPage, data } = this.props;

    //here: pageSize: 5, pageCount: 4, currentPage: 0
    let pageNumbers = [];
    for (let i = 1; i <= pageCount; i++) {
      pageNumbers.push(
        <PaginationItem key={i} active={currentPage === i ? true : false}>
          <PaginationLink onClick={e => this.handleClick(e, i)} href="#">
            {i}
          </PaginationLink>
        </PaginationItem>
      );
    }

    return (
      <React.Fragment>
        {data[0]
          .slice(currentPage * pageSize, (currentPage + 1) * pageSize)
          .map((datum, i) => (
            <tr className="data-slice" key={i}>
              <td>{datum.id}</td>
              <td>{datum.message}</td>
             </tr>
          ))}
        <React.Fragment>
          <Pagination aria-label="Page navigation example">
            <PaginationItem disabled={currentPage <= 0}>
              <PaginationLink
                onClick={e => this.handleClick(e, currentPage - 1)}
                previous
                href="#"
              />
            </PaginationItem>
            {pageNumbers}

            <PaginationItem disabled={currentPage >= pageCount - 1}>
              <PaginationLink
                onClick={e => this.handleClick(e, currentPage + 1)}
                next
                href="#"
              />
            </PaginationItem>
          </Pagination>
        </React.Fragment>
      </React.Fragment>
    );
  }
}

export default TestPagination;

我要在桌子上显示4个页码。但是,当我单击下一步按钮时,什么也没有进行。

第4页之后的下一个箭头未呈现其他数据。请帮助解决问题。

1 个答案:

答案 0 :(得分:2)

在这一行中,您将从props获取currentPage:

const { pageSize, pageCount, currentPage, data } = this.props;

但是currentPage必须取自状态:

const { pageSize, pageCount, data } = this.props;
const {currentPage} = this.state;

由于我不知道组件中数据的形状,因此将其用作简单数组。

工作代码和框:

https://codesandbox.io/s/so-react-page-n89hq

import React, { Component } from "react";
import { Pagination, PaginationItem, PaginationLink, Button } from "reactstrap";

class TestPagination extends Component {
  constructor(props) {
    super(props);

    this.state = {
      currentPage: props.currentPage
    };
  }

  handleClick = (e, index) => {
    e.preventDefault();
    console.log(index);
    this.setState({
      currentPage: index
    });
  };

  render() {
    const { pageSize, pageCount, data } = this.props;
    const { currentPage } = this.state;

    let pageNumbers = [];
    for (let i = 0; i < pageCount; i++) {
      pageNumbers.push(
        <PaginationItem key={i} active={currentPage === i ? true : false}>
          <PaginationLink onClick={e => this.handleClick(e, i)} href="#">
            {i + 1}
          </PaginationLink>
        </PaginationItem>
      );
    }
    const paginatedData = data.slice(
      currentPage * pageSize,
      (currentPage + 1) * pageSize
    );

    return (
      <React.Fragment>
        {paginatedData.map((datum, i) => (
          <tr className="data-slice" key={i}>
            <td>{datum.id}</td>
            <td>{datum.message}</td>
            <td>
              <Button id={datum.i} color="primary">
                Edit Details
              </Button>
            </td>
          </tr>
        ))}
        <React.Fragment>
          <Pagination aria-label="Page navigation example">
            <PaginationItem>
              <PaginationLink
                onClick={e => this.handleClick(e, currentPage - 1)}
                previous
                href="#"
              />
            </PaginationItem>
            {pageNumbers}

            <PaginationItem disabled={currentPage >= pageCount - 1}>
              <PaginationLink
                onClick={e => this.handleClick(e, currentPage + 1)}
                next
                href="#"
              />
            </PaginationItem>
          </Pagination>
          <hr />
          currentPage (real): {this.state.currentPage} <br />
          currentPage (visual): {this.state.currentPage + 1}
        </React.Fragment>
      </React.Fragment>
    );
  }
}

export default TestPagination;

并在App.js中这样使用:

function App() {
  const data = [
    { id: 1, message: "A" },
    { id: 2, message: "B" },
    { id: 3, message: "C" },
    { id: 4, message: "D" },
    { id: 5, message: "E" },
    { id: 6, message: "F" },
    { id: 7, message: "G" }
  ];

  return (
    <div className="App">
      <TestPagination pageSize={3} pageCount={3} currentPage={0} data={data} />
    </div>
  );
}