0

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

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

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

对比

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

第一个按预期工作，并在单击时为我提供组件状态的 id。加载后的第二个会在我有机会点击它们之前打印每个组件的所有 id。我错过了什么？onClick 就是 onClick，为什么那个 return 语句如此重要。谢谢您的帮助。

4

3 回答 3

0

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

在#2 你给出的执行结果this.props.onClick(this.state.id)是无效的。

于 2019-01-18T06:27:17.440 回答
0

onClick需要传递一个函数。

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

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

于 2019-01-18T06:27:42.367 回答
0

您必须调用 onClick 作为

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

所以改为

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

这将防止自动调用事件处理函数。通过上述更改，仅当您单击时才会调用 onClick 事件处理函数

于 2019-01-18T06:24:44.090 回答