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

Question

我正在尝试延迟单击按钮，以便我正在使用的库可以进行快速 api 调用以进行验证。我目前正在使用箭头函数进行反应并尝试 setTimeout。但是，由于某种原因，这似乎触发了页面加载调用。这是我的代码。  onClick={this.handleCardSubmit}handleCardSubmit = setTimeout(() => {    this.setState({ showLoaderForPayment: true });    const { collectJs } = this.state;    collectJs.startPaymentRequest();    this.setState({ isPaymentRequestCalled: true });  }, 500);

Answer 1

您需要按如下方式更改函数声明和定义

handleCardSubmit = ()=>{

setTimeout(() => {

    this.setState({ showLoaderForPayment: true });

    const { collectJs } = this.state;

    collectJs.startPaymentRequest();

    this.setState({ isPaymentRequestCalled: true });

  }, 500);

}

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

Answer 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 });

}

};