如何在按钮点击反应中添加延迟？答案

【问题标题】：How do I add a delay on a button click in react?如何在按钮点击反应中添加延迟？
【发布时间】：2020-03-18 03:28:52
【问题描述】：

我正在尝试延迟单击按钮，以便我使用的库可以进行快速 api 调用以进行验证。我目前正在使用箭头函数进行反应并尝试 setTimeout。但是，由于某种原因，这似乎触发了页面加载调用。这是我的代码。

  onClick={this.handleCardSubmit}

handleCardSubmit = setTimeout(() => {
    this.setState({ showLoaderForPayment: true });
    const { collectJs } = this.state;
    collectJs.startPaymentRequest();
    this.setState({ isPaymentRequestCalled: true });
  }, 500);

【问题讨论】：

onClick={this.handleCardSubmit} 试试这个onClick={()=>this.handleCardSubmit()}
你没有使用evt.preventDefault()，你没有返回false；如果您的按钮是提交按钮，它将执行提交按钮的操作：提交。
那么为什么不能使用 setTimeout 进行 onclick 呢？ onClick={()=>setTimeout(() => {this.handleCardSubmit()},500)} ..只是问？

标签： javascript reactjs jsx

【解决方案1】：

您好，您需要将函数声明和定义更改如下

handleCardSubmit = ()=>{
setTimeout(() => {
    this.setState({ showLoaderForPayment: true });
    const { collectJs } = this.state;
    collectJs.startPaymentRequest();
    this.setState({ isPaymentRequestCalled: true });
  }, 500);
}

在您的代码 sn-p 中，您只是将 settimeout 函数引用传递给 handeCardSubmit ，因此没有绑定 this。为了正确执行它，您必须在箭头函数中编写 setTimeout 函数，然后它将以 500ms 的延迟工作。

【讨论】：

【解决方案2】：

您可以使用 e.preventDefault()，并尝试以下代码。

handleCardSubmit = (e) => {
    e.preventDefault();
    setTimeout(() => {
    this.setState({ showLoaderForPayment: true });
    const { collectJs } = this.state;
    collectJs.startPaymentRequest();
    this.setState({ isPaymentRequestCalled: true });
  }, 500);
};

或者您可以使用 async-await。

handleCardSubmit = async (e) => {
    e.preventDefault();
    await setdata();

    setdata() {
    this.setState({ showLoaderForPayment: true });
    const { collectJs } = this.state;
    collectJs.startPaymentRequest();
    this.setState({ isPaymentRequestCalled: true });
}
};

【讨论】：