父子组件之间的回调函数答案

【问题标题】：Callback Function Between Parent and Child Component父子组件之间的回调函数
【发布时间】：2019-07-17 14:41:43
【问题描述】：

我在父子组件之间传递回调函数时遇到问题。我的子组件是一个数字列表。我正在尝试创建一个分页组件。单击列表编号时，我在 Pages.js 组件中收到错误消息 -TypeError: undefined has no properties 以下是我的代码，在此先感谢。应用.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;

【问题讨论】：

标签： reactjs

【解决方案1】：

首先this 是一个保留关键字，只能在类组件中使用。其次，您在 Pages 组件中传递 onClick 属性。所以<li> 标签应该调用onClick 而不是this.handlePageClick。

下面的代码应该可以在不更改 App 组件中的任何内容的情况下运行。

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

return (

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

  }
}

【讨论】：

太好了，这行得通！我将handlePageClick 传递给子组件而不是onClick。谢谢。

【解决方案2】：

您所要做的就是删除 arg 事件，并仅使用您获得的 num 设置您的状态。

handlePageClick=(num)=> {
   this.setState({
     currentPage: Number(num)
});

【讨论】：