如何替换类组件'；s function.bind（this）在Reactjs（分页）的功能组件中

你好。我正在构建一个带有分页的React crud应用程序。我打算一直使用功能组件。另外，我使用react js分页包进行分页。我在尝试获取单击的特定链接或页码时遇到问题。有了类组件，我可以很容易地使用以下内容获得值：

onChange={this.handlePageChange.bind（this）}

，但是有了这个功能组件，我发现很难做到这一点。我的代码如下所示

分页链接

``

``

---

当我输入“console.log”页码时，它会给出未定义的错误。拜托，我该怎么办？提前感谢

当我尝试此操作时，看起来页码直接传递给了

onChange

处理程序。无需使用

事件.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>
  );
}

从“React”导入React；
导入“/styles.css”；
从“react js Pagination”导入分页；
导出默认函数App（）{
常量activePage=1
const itemsconntperpage=10
常量totalItemsCount=52
const handlePageChange=pageNumber=>console.log（pageNumber）
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
handlePageChange（页码）}
itemClass=“页面项目”
linkClass=“页面链接”
/>
);
}

尝试此操作时，页码似乎直接传递给

onChange

处理程序。无需使用

事件.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>
  );
}

从“React”导入React；
导入“/styles.css”；
从“react js Pagination”导入分页；
导出默认函数App（）{
常量activePage=1
const itemsconntperpage=10
常量totalItemsCount=52
const handlePageChange=pageNumber=>console.log（pageNumber）
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
handlePageChange（页码）}
itemClass=“页面项目”
linkClass=“页面链接”
/>
);
}

只需将

handlePageChange

放到

onChange

const handlepage change=useCallback（（页码）=>{
axios.get(`http://127.0.0.1:8000/api/categories?page=${pageNumber}`）
.then（{data:{data，当前页面，每页，总计}}）=>{
设置类别（数据）；
setActivePage（当前页面）；
setItemsCountPerPage（每页）；
setTotalItemsCount（总计）；
})
.catch（（{message}）=>{
控制台错误（消息）；
});
}, []);只需将
handlePageChange
放到
onChange


const handlepage change=useCallback（（页码）=>{
axios.get(`http://127.0.0.1:8000/api/categories?page=${pageNumber}`）
.then（{data:{data，当前页面，每页，总计}}）=>{
设置类别（数据）；
setActivePage（当前页面）；
setItemsCountPerPage（每页）；
setTotalItemsCount（总计）；
})
.catch（（{message}）=>{
控制台错误（消息）；
});
}, []);
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>
  );
}