如何在reactJs中添加带有表的next & prev按钮？

在ReactJS中添加带有表格的"Next"和"Prev"按钮可以通过以下步骤实现：

首先，确保你已经安装了ReactJS和相关的依赖。
创建一个React组件，命名为TableWithButtons，可以使用类组件或函数组件。
在组件的state中定义一个变量，用于跟踪当前表格显示的页码。例如，可以使用currentPage变量，并将其初始值设置为1。
在组件的render方法中，使用表格组件（例如antd的Table组件）来渲染表格数据。根据当前页码，只显示相应的数据。
在表格下方添加两个按钮，一个是"Prev"按钮，一个是"Next"按钮。给每个按钮添加一个onClick事件处理函数。
在"Prev"按钮的onClick事件处理函数中，将currentPage减1，并更新组件的state。确保currentPage不会小于1。
在"Next"按钮的onClick事件处理函数中，将currentPage加1，并更新组件的state。
在render方法中，根据currentPage的值来决定是否禁用"Prev"按钮或"Next"按钮。当currentPage为1时，禁用"Prev"按钮；当currentPage达到最大页码时，禁用"Next"按钮。

以下是一个示例代码：

import React, { useState } from 'react';
import { Table, Button } from 'antd';

const TableWithButtons = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const data = [
    // 表格数据
  ];

  const pageSize = 10; // 每页显示的数据条数
  const totalPage = Math.ceil(data.length / pageSize); // 总页数

  const handlePrev = () => {
    setCurrentPage(prevPage => prevPage - 1);
  };

  const handleNext = () => {
    setCurrentPage(prevPage => prevPage + 1);
  };

  const renderTableData = () => {
    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = startIndex + pageSize;
    return data.slice(startIndex, endIndex);
  };

  return (
    <div>
      <Table dataSource={renderTableData()} columns={columns} />

      <div>
        <Button onClick={handlePrev} disabled={currentPage === 1}>
          Prev
        </Button>
        <Button onClick={handleNext} disabled={currentPage === totalPage}>
          Next
        </Button>
      </div>
    </div>
  );
};

export default TableWithButtons;

在上述示例代码中，我们使用了antd的Table组件来渲染表格数据。你可以根据自己的需求选择合适的表格组件。

请注意，上述示例代码中的data变量是一个包含表格数据的数组。你需要根据实际情况替换为你自己的数据。

此外，还需要根据实际情况定义表格的列（columns）。

希望这个示例能够帮助你在ReactJS中添加带有表格和"Next"、"Prev"按钮的功能。