父子组件之间的回调函数

Question

我在父子组件之间传递回调函数时遇到问题。我的孩子部分是数字列表。我正在尝试创建一个分页组件。单击列表编号-TypeError时，我在Pages.js组件中收到错误消息：undefined没有属性下面是我的代码，在此先感谢。App.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在Pages组件中传递prop。因此，<li>标记应调用onClick而不是this.handlePageClick。

下面的代码应该可以正常工作，而无需更改App组件中的任何内容。

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

return (

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

  }
}