如何在单击事件后禁用 React js 中的按钮 5 秒答案

【问题标题】：How I can disable a button in React js for 5 seconds after click event如何在单击事件后禁用 React js 中的按钮 5 秒
【发布时间】：2017-10-24 14:59:22
【问题描述】：

我是新来的反应。我需要帮助在我的项目的 react js 中禁用一个按钮 5 秒钟，然后重新启用它。

这是我的代码，

constructor (props) {
    super(props);
    this.onLaunchClicked = this.onLaunchClicked.bind(this);
    this.state = {
        isButtonDisabled: false
    }
}

onLaunchClicked (event) {
    event.preventDefault();
    this.setState({
        isButtonDisabled: true
    });
    return this.props.onLaunchClicked();

}

       render () {
    return (
        <div className="client-playtest-state">
            <button className="btn bg-success" onClick={this.onLaunchClicked} 
         disabled={this.state.isButtonDisabled}>LAUNCH</button>
        </div>
    );
}

【问题讨论】：

分享到目前为止所做的事情。
您可以超时 5 秒。请分享你所拥有的代码示例。我们不是来为你编码的。
对不起，我错过了添加代码，
相关帖子 - ReactJs: Prevent multiple times button press

标签： reactjs

【解决方案1】：

let myInterval, disableOTPmilliseconds = 5000;

const sendOtp = async () => {
try {
  if (userSessionData?.phone?.toString().trim()) {
     const res = await axios.post(
       `${process.env.REACT_APP_API_ENDPOINT}/api/users/send_otp`,
       userSessionData
     );

    setDisableOtpButton(true);

    myInterval = setInterval(() => {
      return setDisableTimer((prev) => prev - 1);
    }, 1000);

    setTimeout(() => {
      setDisableOtpButton(false);
      setDisableTimer(disableOTPmilliseconds / 1000); // using disableOTPmilliseconds variable to define or change the milliseconds.

      clearInterval(myInterval);
    }, disableOTPmilliseconds); 
  }

};

【讨论】：

【解决方案2】：

有很多方法可以做到。

这是我的例子：

React.js 提供名为 ComponentDidMount 的内置函数

在setTimeout中使用构建

方法。有了这个方法，你就可以调用 React.js 的 setState 了。

这里没有经过测试的例子：

componentDidMount(){
 window.setTimeout(function () {
     this.setState({
         isButtonDisabled: false,
     })
 },5000)
}

如果我正确理解了您的问题，这将起作用。用户加入网站后需要等待 5 秒。

请阅读 React 文档。

【讨论】：

感谢您的帮助。

【解决方案3】：

您可以使用setTimeout 并在超时后更新state。

constructor (props) {
    super(props);
    this.onLaunchClicked = this.onLaunchClicked.bind(this);
    this.state = {
        isButtonDisabled: false
    }
}

onLaunchClicked (event) {
    event.preventDefault();
    this.setState({
        isButtonDisabled: true
    });

    // **** here's the timeout ****
    setTimeout(() => this.setState({ isButtonDisabled: false }), 5000);

    return this.props.onLaunchClicked();

}

render () {
    return (
        <div className="client-playtest-state">
            <button className="btn bg-success" onClick={this.onLaunchClicked} 
         disabled={this.state.isButtonDisabled}>LAUNCH</button>
        </div>
    );
}

【讨论】：

非常感谢您的回答:)