如何在Reactjs(分页)中替换类组件的function.bind(this)

Question

您好。我正在构建一个带有分页的React crud应用程序。我打算始终使用功能组件。此外，我正在使用react 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"pageNumber时，它会给我未定义的错误。求你了，我该怎么办？提前感谢

Answer 1

当我尝试这样做时，页面编号似乎直接传递给了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>
);
}

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