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

Question

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

  onClick={this.handleCardSubmit}

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

Answer 1

您好，您需要更改您的 function 声明和定义如下

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

在您的代码片段中，您只是将 settimeout function 引用传递给handeCardSubmit，因此没有绑定。 为了正确执行它，您必须在箭头 function 内写入 setTimeout function，然后它将像延迟 500 毫秒一样工作。

Answer 2

你应该试试这个箭头语法

 onClick={ () => this.handleCardSubmit() }

而不是这个

onClick={ this.handleCardSubmit } 

Answer 3

您可以使用 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 });
}
};