从传递函数到子组件的奇数结果[重复]

Question

因此，我在理解传递给子组件的prop的函数调用方式的差异时遇到了一个问题。

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

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

v、 美国。

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

第一个按预期工作，并在单击时给我组件状态的id。第二个在加载时打印每个组件的所有id，甚至在我有机会点击它们之前。我错过了什么？为什么返回语句如此重要？谢谢你的帮助。

Answer 1

匿名用户

需要传递一个函数。

您的第一个示例传递了一个调用此函数的函数。道具。onClick（this.state.id）当它运行并正常工作时。

第二个示例将onClick的计算结果传递给this。道具。onClick（this.state.id）这就是为什么组件加载时会立即打印所有id的原因。我猜调用此函数不会返回任何结果。道具。onClick（this.state.id）soonClick在单击div时没有任何调用。

Answer 2

在

在#2处，您给出执行的结果。道具。onClick（this.state.id）无效。

Answer 3

你一定是打电话给点击

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

所以换成

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

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