React中一键连续调用函数答案

【问题标题】：Caling functions consecutively for one click in ReactReact中一键连续调用函数
【发布时间】：2018-07-30 09:23:35
【问题描述】：

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

但是，在我的情况下，如果我指定为 onClick={this.handleClick} 会按预期工作。但是，如果我指定为onClick={(event) => {this.handleClick()}}，则单击按钮时不会发生任何事情。这可能是什么原因？在第二个函数调用取决于第一个函数调用的结果的情况下，一个接一个地调用两个函数的最佳方式是什么。

【问题讨论】：

你能显示完整的代码吗？该结果也是一些计算或一些 api 调用结果？
@MayankShukla this.handleClick 调用提供与身份验证相关的信息的 api

标签： javascript reactjs onclick

【解决方案1】：

你可以试试下面的

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

onClick={this.handleClick}

handleClick 事件

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

第二种方式

你可以通过绑定函数来发送事件

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

现在点击功能看起来像

handleClick = (additionParameter, event) =>{}

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

【讨论】：

【解决方案2】：

在 Javascript 中，this 不是为一段代码静态定义的（就像在 99% 的其他语言中一样），而是从调用上下文中获取的（即它是动态范围的），因此它可能会因调用者的不同而有所不同功能和时间。

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：