Question

所以我在理解传递给子组件的prop的函数调用方式上的差异时遇到了问题。

onClick(id)   {
    console.log(id)
}

<div className="card" onClick={() => this.props.onClick(this.state.id)}>

vs。

<div className="card" onClick={this.props.onClick(this.state.id)}>

第一个按预期方式工作，并在单击时为我提供组件状态的ID。第二次加载时，在我什至没有机会单击它们之前，它会打印每个组件的所有ID。我想念什么？ onClick是onClick，为什么该return语句如此重要。谢谢您的帮助。

Answer 1

您必须以以下方式调用onClick

   onClick={this.props.onClick(this.state.id)}

因此更改为

  onClick={() => this.props.onClick(this.state.id)}

这将阻止获取自动调用的事件处理函数。通过上述更改，仅在您单击时才会调用onClick事件处理程序函数

Answer 2

onClick中的

<div>需要一个函数，该函数是您在＃1处给出的（称为箭头函数）。

在＃2，您给出执行this.props.onClick(this.state.id)的结果，该结果无效。

Answer 3

onClick需要传递一个函数。

您的第一个示例为onClick传递了一个函数，该函数在运行并正常运行时会调用this.props.onClick(this.state.id)。

您的第二个示例传递了onClick 评估this.props.onClick(this.state.id) 的结果，这就是为什么在加载组件时立即打印所有id的原因。我猜测调用this.props.onClick(this.state.id)不会返回任何内容，因此当onClick被点击时div不会有任何呼叫。

将函数传递给子组件的结果很奇怪

3 个答案: