reactjs - react-js-pagination如何用react hook数据表实现

Question

如何将分页代码与钩子方法数据表集成在一起。我正在使用 react-js-pagination nmp 包，但是没有一个关于使用钩子方法程序实现的解释。

这是我的数据表代码：

    import React, { useEffect, useState } from 'react';
    import axios from 'axios'
    import 'bootstrap/dist/css/bootstrap.min.css';
    import {Link} from 'react-router-dom';
    const ProTable = () => {
      const [data, setData] = useState([]); 
      useEffect(() => {
        loadData();
      }, []);
      const loadData = async() => {
        axios.get('http://localhost:5000/api/clientgetdata')
          .then(response => {
            setData(response.data.map);
      }   
      const delPro = (item,e) => {
    
        var option = window.confirm(`Are you sure to delete ${e.clientName} OF ${item.projectName}`)
        if(option){
          const check = axios.delete(`http://localhost:5000/api/clientdelpro/${e.clientName}/${item.projectName}`).then(res => {
          //console.log(clientname) 
          window.location.reload(false)
          })
       }
      }
        
      return (
        <>
          <div className="row addButton">
                <div className="col-lg-1">
                <Link
                    className="btn btn-outline-primary mr-2"
                    to={'/client/addpro'}
                  >New</Link>
                </div>
                <div className="col-lg-1">
                {/* <button variant="primary" >Delete</button> */}
                </div>
            </div>
          <div className="row hrtable">
            <div className="col-lg-10 col-sm-6 col-md-6">
              <div className="table-responsive tcenter" >
                <table className="table table-bordered table-hover table-sm">
                  <thead className="thead-dark">
                    <tr>                 
                      <th scope="col"><input type="checkbox" /></th>
                      <th scope="col">Client Name</th>
                      <th scope="col">Project Name</th>
                      <th scope="col">Status</th>  
                      <th>Action</th>        
                    </tr>
                  </thead>
                    { (data.length > 0) ? data.map( e => {
                      return (
                        <>
                          {e.project.map(item=> {
                          return (
                            <tbody>
                              <tr>
                              <th scope="row">
                                <input type="checkbox"/>
                              </th>
                              <td><ul>{e.clientName}</ul></td>
                              <td><ul>{item.projectName}</ul></td>
                              <td><ul>{item.proStatus}</ul></td>
                              <td>
                              <Link
                                  className="btn btn-outline-primary mr-2"
                                  to={`/project/edit/${e.clientName}/${item.projectName}`} >
                                  Edit
                              </Link>
                              <button
                                className="btn btn-danger"
                                onClick={() => delPro(item,e)}>
                                Delete
                             </button>
                             
                            </td>   
                            </tr>
                            </tbody>
                            );
                        })}
                      </>
                      );
                    }) : <tr><td colSpan="5">No Records Found</td></tr> } 
                </table>
                </div> 
              </div>
              </div>
         </>
      );
    }
    
    export default ProTable;

这是 Reaci-js-pagination 代码。我正在尝试按照本教程在我的应用程序中创建分页https://www.npmjs.com/package/react-js-pagination#usage

    import React, { Component } from "react";
    import ReactDOM from "react-dom";
    import Pagination from "react-js-pagination";
    require("bootstrap/less/bootstrap.less");
     
    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          activePage: 15
        };
      }
     
      handlePageChange(pageNumber) {
        console.log(`active page is ${pageNumber}`);
        this.setState({activePage: pageNumber});
      }
     
      render() {
        return (
          <div>
            <Pagination
              activePage={this.state.activePage}
              itemsCountPerPage={10}
              totalItemsCount={450}
              pageRangeDisplayed={5}
              onChange={this.handlePageChange.bind(this)}
            />
          </div>
        );
      }
    }
     

plz help me how integrate both code
 

标签： reactjspagination

Answer 1

尝试将其转换为钩子

 const [state, setState] = React.useState({activePage: 15});

 
  const handlePageChange=(pageNumber) => {
    setState({activePage: pageNumber});
    // make api call for next page
  }
 
    return (
      <div>
        <Pagination
          activePage={state.activePage}
          itemsCountPerPage={10}  // pass your fixed item per pages
          totalItemsCount={450}   // total item -> per-page * no of page
          pageRangeDisplayed={5}   
          onChange={handlePageChange}
        />
      </div>
    );