如何在 Reactjs 的功能组件中替换 class 组件的 function.bind(this)（分页）

Question

美好的一天。我正在构建一个带有分页的 React crud 应用程序。我打算始终使用功能组件。此外，我正在使用 react-js-pagination 包进行分页。我运行在尝试获取特定的 link 或被单击的页码时遇到了问题。使用 class 组件，我可以很容易地使用这个值：onChange={this.handlePageChange.bind(this)}，但是使用这个功能组件，我发现很难做到。我的代码如下所示。

分页数links

``

<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' pageNumber 时，它给了我未定义的错误。请问，我该怎么做？提前致谢

Answer 1

当我尝试这样做时，页码似乎直接传递给了 onChange 处理程序。无需使用 event.target.value。您可以查看此 here 的示例。希望对您有所帮助！

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

Answer 2

只要把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);
    });
}, []);

如何在 Reactjs 的功能组件中替换 class 组件的 function.bind(this)（分页）

How to replace class component's function.bind(this) in functional component in Reactjs (pagination)

pagination

this

ecmascript-6

reactjs

react-functional-component