Javascript 函数组件中的this.handleClick.bind（this）

我想使用React中的函数组件创建分页。我的问题是，我不能使用这种结构使用

this.handleClick.bind（this）

。是否有可能在使用函数组件的情况下以其他方式使用分页？现在的代码是

import React from "react";

const Pagination = (props) => {
  this.handleClick = this.handleClick.bind(this); // I can't use it
  const pageNumbers = [];

  for (let i = 1; i <= Math.ceil(props.nameList.length / props.todosPerPage); i++) {
    pageNumbers.push(i);
  }
  const renderPageNumbers = pageNumbers.map((number) => {
    return (
      <li key={number} id={number} onClick={this.handleClick}>
        {number}
      </li>
    );
  });
  return <ul id="page-numbers">{renderPageNumbers}</ul>;
};

export default Pagination;

从“React”导入React；
常量分页=（道具）=>{
this.handleClick=this.handleClick.bind（this）；//我不能用它
常量页码=[]；
for（设i=1；i{
返回(

{number}

);
});
return
{renderPageNumbers}
；
};
导出默认分页；

在功能组件中，您只需直接定义和使用方法，而无需绑定到上下文

import React from "react";

const Pagination = (props) => {
  const handleClick = (event) => {
    console.log('ok')
  }
  const pageNumbers = [];

  for (let i = 1; i <= Math.ceil(props.nameList.length / props.todosPerPage); i++) {
    pageNumbers.push(i);
  }
  const renderPageNumbers = pageNumbers.map((number) => {
    return (
      <li key={number} id={number} onClick={handleClick}>
        {number}
      </li>
    );
  });
  return <ul id="page-numbers">{renderPageNumbers}</ul>;
};

export default Pagination;

从“React”导入React；
常量分页=（道具）=>{
常量handleClick=（事件）=>{
console.log（'ok'）
}
常量页码=[]；
for（设i=1；i{
返回(

{number}

);
});
return
{renderPageNumbers}
；
};
导出默认分页；

在功能组件中，您只需直接定义和使用方法，而无需绑定到上下文

import React from "react";

const Pagination = (props) => {
  const handleClick = (event) => {
    console.log('ok')
  }
  const pageNumbers = [];

  for (let i = 1; i <= Math.ceil(props.nameList.length / props.todosPerPage); i++) {
    pageNumbers.push(i);
  }
  const renderPageNumbers = pageNumbers.map((number) => {
    return (
      <li key={number} id={number} onClick={handleClick}>
        {number}
      </li>
    );
  });
  return <ul id="page-numbers">{renderPageNumbers}</ul>;
};

export default Pagination;

从“React”导入React；
常量分页=（道具）=>{
常量handleClick=（事件）=>{
console.log（'ok'）
}
常量页码=[]；
for（设i=1；i{
返回(

{number}

);
});
return
{renderPageNumbers}
；
};
导出默认分页；

是的，但这样分页就不起作用了。如果我使用这种语法this.handleClick=this.handleClick.bind（this）；在类组件中，然后我调用onClick={this.handleClick}，它会更改页面。那么，在这一点上有什么不同呢？@End.Game您是否可以添加更多的代码，可能是使用分页的地方。此外，您是否在不同的部分定义了

handleClick

？是的，但是，这样分页就不起作用了。如果我使用这种语法this.handleClick=this.handleClick.bind（this）；在类组件中，然后我调用onClick={this.handleClick}，它会更改页面。那么，在这一点上有什么不同呢？@End.Game您是否可以添加更多的代码，可能是使用分页的地方。此外，您是否在不同的部分定义了

handleClick

？