Как заменить function.bind (this) компонента класса в функциональном компоненте в Reactjs (разбиение на страницы) - PullRequest
Новая
       91

Как заменить function.bind (this) компонента класса в функциональном компоненте в Reactjs (разбиение на страницы)

1 голос
/ 13 апреля 2020

Добрый день. Я создаю приложение React Crud с нумерацией страниц. Я намерен использовать функциональные компоненты на всем протяжении. Кроме того, я использую пакет реагирования js для нумерации страниц. Я столкнулся с проблемой при попытке получить конкретную ссылку или номер страницы, по которой был нажат. С компонентом класса я легко могу получить значение, используя это: onChange={this.handlePageChange.bind(this)}, но с этим функциональным компонентом мне трудно это сделать. Мой код показан ниже.

Пагинационные ссылки

`` 

<div className="d-flex justify-content-center">
                <Pagination
                    activePage={activePage}
                    itemsCountPerPage={itemsCountPerPage}
                    totalItemsCount={totalItemsCount}
                    pageRangeDisplayed={3}
                    onChange={(e) => {
                        handlePageChange(e.target.value);
                    }}
                    itemClass="page-item"
                    linkClass="page-link"
                />
            </div>

``

Теперь функция handlePageChange

`` 

const handlePageChange = async (pageNumber) => {
        console.log(`active page is ${pageNumber}`);
        await axios.get(`http://127.0.0.1:8000/api/categories?page=`+ pageNumber).then(res => {
            setCategories(res.data.data);
            setActivePage(res.data.current_page);
            setItemsCountPerPage(res.data.per_page);
            setTotalItemsCount(res.data.total);
            console.log("yes");
        });    
    }

``

Когда я 'console.log' номер страницы, это дает мне неопределенную ошибку. Пожалуйста, как мне go об этом? Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 13 апреля 2020

Просто положите handlePageChange в onChange

const handlePageChange = useCallback((pageNumber) => {
  axios.get(`http://127.0.0.1:8000/api/categories?page=${pageNumber}`)
    .then(({ data: { data, current_page, per_page, total } }) => {
      setCategories(data);
      setActivePage(current_page);
      setItemsCountPerPage(per_page);
      setTotalItemsCount(total);
    })
    .catch(({ message }) => {
      console.error(message);
    });
}, []);
0 голосов
/ 13 апреля 2020

Когда я пытаюсь это сделать, похоже, что номер страницы передается непосредственно обработчику onChange. Не нужно использовать event.target.value. Вы можете увидеть пример этого здесь . Надеюсь, это поможет! 

import React from "react";
import "./styles.css";
import Pagination from 'react-js-pagination';

export default function App() {
  const activePage = 1
  const itemsCountPerPage = 10
  const totalItemsCount = 52

  const handlePageChange = pageNumber => console.log(pageNumber)

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Pagination
        activePage={activePage}
        itemsCountPerPage={itemsCountPerPage}
        totalItemsCount={totalItemsCount}
        pageRangeDisplayed={3}
        onChange={pageNumber => handlePageChange(pageNumber)}
        itemClass="page-item"
        linkClass="page-link"
      />
    </div>
  );
}
...