Как заставить следующие стрелки работать в реагировать - PullRequest
Новая
       4

Как заставить следующие стрелки работать в реагировать

0 голосов
/ 31 октября 2019

Я делаю проект, используя React, Node.js и MongoDB. Я пытаюсь реализовать разбиение на страницы с помощью библиотекиact-js-pagination, и в настоящее время она работает нормально, вот как это выглядит:

enter image description here Проблема заключается в том, что при нажатии кнопкиодиночные кнопки со стрелками должны перемещаться вперед и назад, показывая 7-ю, страницу и т. д. до конца, и если я нажимаю на кнопку с двойной стрелкой, она должна отображать последнюю разбитую на страницы страницу, но эти кнопки не работают, как в приведенном примерездесь: http://vayser.github.io/react-js-pagination/

Это единственная документация, которая существует, и она не предоставляет никакой информации о том, как заставить стрелки работать: https://www.npmjs.com/package/react-js-pagination

Я пытался добавить bootsrap css и js иТем не менее, они не работают, что я пропускаю, как я могу заставить эти стрелки работать как надоВот логика, которую я написал для нумерации страниц: 

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { BrowserRouter as Router, Route, } from 'react-router-dom';
import Header from '../src/components/Header/Header';
import Footer from '../src/components/Footer/Footer';
import Pagination from "react-js-pagination";

import Post from './components/Post/Post';


const App = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage] = useState(5);
  const [activePage] = useState(1)

  useEffect(() => {
    const fetchPosts = async () => {
      setLoading(true);
      const res = await axios.get('http://localhost:8080/');
      setPosts(res.data);
      console.log(res)
      setLoading(false);
    };

    fetchPosts();
  }, []);

  // Get current posts
  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);

  // Change page
  const paginate = (pageNumber, activePage) => setCurrentPage(pageNumber, activePage= pageNumber);

  return (
    <Router>
       <div className="App">
         <Header/>
          <Route path="/Post"/>
           <div className="column-container">
            <div className="col">
            <Post 
           posts={currentPosts}
           loading={loading} 
           />
             <Pagination
            activePage={activePage}
            itemsCountPerPage={5}
            totalItemsCount={posts.length}
            pageRangeDisplayed={6}
            onChange={paginate}
            />
            </div>
           </div>
         <Footer/>
      </div>
     </Router>
  );
};

export default App;
...