Question

我在reactjs应用程序中实现了Bootstrap的分页。能够导航到下一页但无法导航到以前的页面。点击上一页时，它只导航到下一页..

除了上一页的问题之外，其余的功能性按照分页逻辑正常工作。

请你帮我解决一下。

请在下面找到我的代码。

class SearchResults extends React.Component {
  constructor(props) {
    super(props);
    this.state = {  };
    this.handlePageChange=this.handlePageChange.bind(this);
  }

  getNumPages(currentPage) {
    { this.handlePageChange } 
      this.setState({
        per_page: this.props.results ,
        currentPage: currentPage + 1 ,
        previousPage: currentPage - 1
      });
    }

  handlePageChange(page, evt) {
    const currentPage = this.state.currentPage || 1;
    const numPages = this.getNumPages();
    const pageLinks = [];
    if (currentPage > 1) {
    if (currentPage > 2) {
      pageLinks.push(1);
      pageLinks.push(' ');
    }
      pageLinks.push(currentPage - 1);
      pageLinks.push(' ');
    }
    for (let i = 1; i <= numPages; i++) {
      const page = i;
      pageLinks.push(page);
    }
    if (currentPage < numPages) {
      pageLinks.push(' ');
      pageLinks.push(currentPage + 1);
      if (currentPage < numPages - 1) {
        pageLinks.push(' ');
        pageLinks.push(numPages);
      }
    }
    this.setState({ currentPage: currentPage + 1  } );
    this.setState({ previousPage: currentPage - 1  } );
  }

  render() {
    const per_page = "10";
    const paginationData = this.props.results;
    let numPages = Math.ceil(paginationData.length / per_page);
    if (paginationData.length % per_page > 0) {
      numPages++;
    }
    return (
      <div className="panel panel-primary">
        <div className="panel-heading">ORDERS LIST</div>
        <table className="table table-hover" }} >
          <thead >
            <tr>
              <th>Customer Name</th>
              <th>Assignee</th>
              <th>Status</th>
              <th>Creation Date </th>
            </tr>
          </thead>
          <SearchResultsList items={ this.props.results } open={ this.props.open } 
          current_Page={ this.state.currentPage }  />
        </table>

        <Pagination id="content" className="users-pagination pull-right" 
        bsSize="medium" 
        first last  next  prev  boundaryLinks items={numPages} 
        activePage={ this.state.currentPage } onSelect={ this.handlePageChange } />
      </div>
    );
  }
}

Answer 1

请找到工作代码。

必须在handlePageChange（页面）中传递页码，并且必须设置当前页面的页码（this.setState（{currentPage：page}）;）。

class SearchResults extends React.Component {
 constructor(props) {
 super(props);
 this.state = {  };
}

handlePageChange(page) {
this.setState({ currentPage: page } );
}

render() {
  return (
  <div className="panel panel-primary">
    <div className="panel-heading">ORDERS LIST</div>
    <table className="table table-hover" }} >
      <thead >
        <tr>
          <th>Customer Name</th>
          <th>Assignee</th>
          <th>Status</th>
          <th>Creation Date </th>
        </tr>
      </thead>
      <SearchResultsList items={ this.props.results } open={ this.props.open 
     } 
      current_Page={ this.state.currentPage }  />
    </table>

    <Pagination id="content" className="users-pagination pull-right" 
    bsSize="medium" 
    first last  next  prev  boundaryLinks items={numPages} 
    activePage={ this.state.currentPage } onSelect={ this.handlePageChange } 
    />
   </div>
   );
  }
}

Bootstrap的分页 - 无法导航到上一页（reactjs）

1 个答案: