reactjs - 父子组件之间的回调函数

Question

我在父组件和子组件之间传递回调函数时遇到问题。我的子组件是一个数字列表。我正在尝试创建一个分页组件。单击列表号时，我在 Pages.js 组件中收到错误消息 -TypeError:未定义没有属性以下是我的代码，提前致谢。应用程序.js

class App extends Component {

  state = {
    CurrentPage: 1,
    Items: []
  }
  handlePageClick = (event) => {
    this.setState({
      currentPage: Number(event.target.id)
    });
  }
  render() {
    const pageNumbers = 10;
    return ( <
      Pages pageNumbers = {
        pageNumbers
      }
      onClick = {
        this.handlePageClick
      }
      /> 
    );

  }


}

Pages.js

import React from 'react';

const Pages = ({
  pageNumbers,
  handlePageClick
}) => {
  return (

    pageNumbers.map(number => < li key = {
        number
      }
      id = {
        number
      }
      onClick = {
        () => this.handlePageClick(number)
      } > {
        number
      } <
      /li>)
    );

  }
}
export default Pages;

Answer 1

首先this是只能在类组件中使用的保留关键字。其次你经过了onClick页面组件中的 prop。所以<li>标签应调用 onClick而不是this.handlePageClick 。

下面的代码应该可以在不更改应用程序组件中的任何内容的情况下工作。

const Pages = ({
  pageNumbers,
  onClick
}) => {

return (

pageNumbers.map(number => 
  <li key={number}
    id={number}
    onClick={onClick}
  >
    {number}  
  </li>)
  );

  }
}