函数组件中的 this.handleClick.bind(this)

Posted 2023-02-23

【中文标题】函数组件中的 this.handleClick.bind(this)

【英文标题】：this.handleClick.bind(this) in function component

【发布时间】：2021-01-17 07:27:33

【问题描述】：

我想在 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;

【参考方案1】：

在函数式组件中，你只需要直接定义和使用方法，而不需要绑定上下文

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;

【讨论】：

是的，但是，以这种方式分页它不起作用。如果我使用这种语法 this.handleClick = this.handleClick.bind(this);在一个类组件中，然后我调用 onClick=this.handleClick 它更改页面。那么，此时有什么不同呢？

@End.Game 能不能多加点代码，可能是用分页的地方。此外，您是否在不同的部分定义handleClick？