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

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