将函数传递给onClick参数

Question

您能解释一下为什么这两个代码片段工作不同吗？

handleClick = () => {
    this.props.openImageSelector()
  }

{...}
<MyButton
 onClick={this.handleClick}
>
{...}

按预期工作：在单击按钮后调用该函数。

{...}
<MyButton
 onClick={this.props.openImageSelector()}
>
{...}

另一方面，呈现组件时，该函数调用一次函数，然后单击不起作用。差异来自哪里？

Answer 1

区别在于呼叫或传递，

在第一个示例中，只要单击组件，就调用一个函数

在第二个示例中，只要单击组件，就传递一个函数

Answer 2

在第一个示例中，onClick包含对handleClick方法的引用。

在第二个示例中，onClick直接执行功能openImageSelector。相反，您需要做的是：onClick={() => this.props.openImageSelector()}。

Answer 3

这是因为在函数()的末尾有openImageSelector，这使函数可以执行并将返回值（如果有）分配给onClick。

这就是为什么在渲染组件时执行函数的原因。