将函数传递给子组件的奇怪结果[重复]

Posted 2023-02-22

【中文标题】将函数传递给子组件的奇怪结果[重复]

【英文标题】：An odd result from a passed function to a child component [duplicate]

【发布时间】：2019-06-12 09:41:58

【问题描述】：

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

onClick(id)   
    console.log(id)


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

v.s.

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

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

【参考方案1】：

onClick 需要传递一个函数。

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

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

【参考方案2】：

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

在 #2 处，您给出了执行 this.props.onClick(this.state.id) 的结果，这是无效的。

【参考方案3】：

你必须调用 onClick

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

所以改成

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

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