函数组件中的this.handleClick.bindthis

问题描述

我想使用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;

解决方法

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

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;