如何在reactJs中实现分页

  • Z时代
  • 2024-01-10
  • 分类：问答

我是ReactJS的新手，正在其中创建一个简单的TODO应用程序。实际上，这是一个非常基本的应用程序，没有数据库连接，任务存储在数组中。我现在想添加分页功能，并添加了“编辑和删除”功能。如何实施？任何帮助将不胜感激。谢谢…！！

回答：

我最近在纯React

JS中实现了分页。这是一个工作示例：http :

//codepen.io/PiotrBerebecki/pen/pEYPbY

当然，您必须调整逻辑和页码的显示方式，以使其符合您的要求。

完整代码：

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')
);

以上是 如何在reactJs中实现分页 的全部内容， 来源链接： utcz.com/qa/424897.html

回到顶部