Javascript 如何在react中添加按钮点击延迟？

我正试图延迟一个按钮的点击，以便我正在使用的库可以快速调用api进行验证。我目前正在react中使用箭头函数，并尝试设置超时。但是，由于某种原因，这似乎触发了页面加载调用。这是我的密码

  onClick={this.handleCardSubmit}

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

---

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

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

---

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

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

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

---

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

您可以使用e.preventDefault（），然后尝试下面的代码

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

或者您可以使用异步等待

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

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

---

您可以使用e.preventDefault（），并尝试以下代码

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

或者您可以使用异步等待

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

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

---

onClick={this.handleCardSubmit}

试试这个

onClick={（）=>this.handleCardSubmit（）}

你没有使用

evt.preventDefault（）

，你没有返回

false

；如果您的按钮是“提交”按钮，它将执行“提交”按钮所执行的操作：提交。那么为什么不能对onclick使用setTimeout呢

onClick={（）=>setTimeout（（）=>{this.handleCardSubmit（）}，500}

。只是问一下？

onClick={this.handleCardSubmit}

试试这个

onClick={（）=>this.handleCardSubmit（）}

你没有使用

evt.preventDefault（）

，你没有返回

false

；如果您的按钮是“提交”按钮，它将执行“提交”按钮所执行的操作：提交。那么为什么不能对onclick使用setTimeout呢

onClick={（）=>setTimeout（（）=>{this.handleCardSubmit（）}，500}

。问一下？