将函数传递给onClick参数

Question

你能解释一下为什么这两个片段的工作方式不同吗？

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

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

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

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

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

Answer 1

这是因为你在函数()的末尾有openImageSelector，它使函数执行并将返回值（如果有的话）赋给onClick。

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

Answer 2

差异在于呼唤或传递，

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

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

Answer 3

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

在第二个例子中，onClick直接执行函数openImageSelector。你需要做的是：onClick={() => this.props.openImageSelector()}。