Question

我需要基于一个onClick事件执行2个函数。为此，我找到了一些通过stackoverflow的方法。（引述为Call multiple functions onClick ReactJS）

但是，就我而言，如果我指定为onClick={this.handleClick}可以正常工作。但是，如果我指定为onClick={(event) => {this.handleClick()}}，则在单击按钮时什么也不会发生。这可能是什么原因？在onClick上一对一调用两个函数的最佳方法是什么，第二个函数调用取决于第一个函数调用的结果。

Answer 1

在Javascript中，this不是为一段代码静态定义的（就像在其他99％的其他语言中一样），而是取自调用上下文（即，它是动态范围的），因此它可能会有所不同谁调用该函数以及何时调用。

在第二种情况下，this的求值时间较晚：调用该函数时。在第一种情况下，将在事件附加时进行评估（因此它是“正确的”）。

解决方案只是使用第一个版本-延迟调用它不会有任何好处（无论如何，事件将作为第一个参数传递）。

Answer 2

您可以尝试以下

您的onClick像这样，默认情况下会发送事件

onClick={this.handleClick}

handleClick事件

handleClick = (event) => {
  fetch.fetchUrl(url [, options], ()=> {
   this.getFoo();
  })
}
getFoo = ()=>{}

第二种方式

您可以通过绑定功能来发送事件

onClick={this.handleClick.bind(this, additionalParameter)}

现在的点击功能将类似于

handleClick = (additionParameter, event) =>{}

此外，如果您想同时发送其他参数，则可以采用第二种方法。两种方式仍会传递与处理程序相关的事件。

Answer 3

在第二个内部调用第一个函数应该可以。 PFB步骤-

定义第一个功能。
在第二个函数定义中，首先调用第一个函数，并相应地将第一个函数的输出用于第二个函数的定义中的进一步操作语句。
在点击事件上调用第二个功能。

这将导致调用第二个函数，但将根据调用第一个函数提供的输出进行操作。

在React中一键连续执行校准功能

3 个答案: