如何实施反应js分页

Question

我正在使用 react-js-pagination 。

我能够获取数据并显示数据列表。但我试图用 react-js-pagination 来推动分离。我能够在按钮中显示分页栏，但无法获得功能。 我在这里尝试每页显示3条记录。

UI

Map

方式

<div style={pannelFooter}>
    <Pagination
        activePage={this.state.activePage}
        itemsCountPerPage={3}
        totalItemsCount={this.state.projectList.length}
        pageRangeDisplayed={5}
        onChange={this.handlePageChange}
    />
</div>

构造

handlePageChange(pageNumber) {
    this.setState({ activePage: pageNumber });
}

FUll Component

constructor(props) {
    super(props);

    this.state = {
        activePage: 1,
        projectList: [],
        originalProjectList: []
    };

    this.handlePageChange = this.handlePageChange.bind(this);
}

Answer 1

var indexOfLastTodo = this.state.activePage * this.state.itemPerPage;
var indexOfFirstTodo = indexOfLastTodo - this.state.itemPerPage;
var renderedProjects = this.state.projectList.slice(indexOfFirstTodo, indexOfLastTodo);



var listItems = renderedProjects.map((item, index) => {
    return <tr key={index}>
        <td onClick={e => this.projectDetails(item, index, e)}><a><u>{item.projectName}</u></a></td>
        <td>{item.description}</td>
        <td><i className="glyphicon glyphicon-trash" onClick={(e) => { if (window.confirm('All its related data will be deleted. Are you sure you want to delete?')) this.deleteMessage(item, index) } } > </i></td> 
        <td><i className="glyphicon glyphicon-edit" id="edit" onClick={e => this.editProject(item, index, e)}></i></td>
    </tr>
});

此处需要使用projectList更新slice(firstIndex, lastIndex)数组。那么子阵列应该用于牧场目的。

和paggination标签应该如下所示

<Pagination
    activePage={this.state.activePage}
    itemsCountPerPage={this.state.itemPerPage}
    totalItemsCount={this.state.originalProjectList.length}
    pageRangeDisplayed={5}
    onChange={this.handlePageChange.bind(this)}
/>

Answer 2

利用ES6。 所以，做了这样的事情：

this.handlePageChange = this.handlePageChange.bind(this);

你可以这样做：

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

希望这有帮助。