如何在 React 中实现分页 [英] How to implement pagination in React
问题描述
我是 ReactJS 的新手，正在其中创建一个简单的 TODO 应用程序.实际上，这是一个非常基本的应用程序，没有数据库连接，任务存储在数组中.我添加了编辑和删除功能，现在我想添加分页.
I am new to ReactJS and am creating a simple TODO application in it. Actually, it is a very basic app with no DB connection, tasks are stored in an array. I added Edit and Delete functionality to it now I want to add pagination.
我该如何实施?任何帮助将不胜感激.谢谢...！！
How do I implement it? Any help will be appreciated. Thank you...!!
推荐答案
我最近在纯 React JS 中实现了分页.这是一个工作演示:http://codepen.io/PiotrBerebecki/pen/pEYPbY>
您当然需要调整逻辑和页码的显示方式，以满足您的要求.
I've implemented pagination in pure React JS recently. Here is a working demo: http://codepen.io/PiotrBerebecki/pen/pEYPbY
完整代码:
Full code:);}}ReactDOM.render(<TodoApp/>,document.getElementById('app'));
class TodoApp extends React.Component {
constructor() {
super();
this.state = {
todos: ['a','b','c','d','e','f','g','h','i','j','k'],
currentPage: 1,
todosPerPage: 3
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
this.setState({
currentPage: Number(event.target.id)
});
}
render() {
const { todos, currentPage, todosPerPage } = this.state;
// Logic for displaying todos
const indexOfLastTodo = currentPage * todosPerPage;
const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
const currentTodos = todos.slice(indexOfFirstTodo, indexOfLastTodo);
const renderTodos = currentTodos.map((todo, index) => {
return <li key={index}>{todo}</li>;
});
// Logic for displaying page numbers
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(todos.length / todosPerPage); i++) {
pageNumbers.push(i);
}
const renderPageNumbers = pageNumbers.map(number => {
return (
<li
key={number}
id={number}
onClick={this.handleClick}
>
{number}
</li>
);
});
return (
<div>
<ul>
{renderTodos}
</ul>
<ul id="page-numbers">
{renderPageNumbers}
</ul>
</div>
);
}
}
ReactDOM.render(
<TodoApp />,
document.getElementById('app')
);
这篇关于如何在 React 中实现分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
