Question

我是新手做出反应。我需要帮助，在我的项目的反应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>
    );
}

Answer 1

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

Answer 2

有很多方法可以做到。

以下是我的例子：

React.js提供了名为ComponentDidMount

的内置函数

使用内置setTimeout

方法。通过这种方法，您将能够调用React.js setState。

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

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

如果我理解你的问题，这将有效。用户加入网站后，他需要等待5秒钟。

请阅读React文档。

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

2 个答案: