reactjs - 单击事件后如何在React js中禁用按钮5秒钟

我是新来的 react 。我需要在我的项目的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>
    );
}

最佳答案

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

关于reactjs - 单击事件后如何在React js中禁用按钮5秒钟，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44155442/