부트 스트랩의 페이지 매김 - 이전 페이지 (reactjs)로 이동할 수 없습니다.

Question

내 reactjs 응용 프로그램에서 부트 스트랩의 페이지 매김을 구현했습니다. 다음 페이지로 이동할 수는 있지만 이전 페이지로 이동할 수는 없습니다. 이전 페이지를 클릭하면 다음 페이지로 이동합니다 ..

이 이전 페이지 문제 외에도 나머지 기능은 페이지 매김 논리에 따라 잘 작동합니다.

나를 똑같이 도와 주시겠습니까?

아래 코드를 찾으십시오.

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 (page)에서 페이지 번호를 전달하고 현재 페이지 (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> 
    ); 
    } 
}