Question

我有新的反应，现在我遇到了问题。我在我的应用程序3组件中： 应用组件：

class App extends Component {

    constructor(){
        super();
        this.state = {
            showToast:false,
            toastMessage: ""
        };

        this.handleShowToast = this.handleShowToast.bind(this);
    };

    handleShowToast(message) {
        this.setState({ showToast: true, toastMessage: message});
        setTimeout(function() { 
            if(this.state.showToast){
                this.setState({ showToast: false });

            }}.bind(this), 2000);
        };


  render() {
    return (
            <div id="cont">
               <Toast showToast={this.state.showToast} messageToast={this.state.toastMessage} />
               <Header handleToast={this.handleShowToast}/>
            </div>
    );
  }
}

在我的标题组件中，我点击了按钮， hadleShowToast 正在执行， Toast 组件正确显示并且可以正常运行，但我会（现在我使用setInterval，但不起作用，因为如果我点击第二次按钮它会立即隐藏，因为有一个先行setInterval）隐藏Toast组件，2秒后，如果我不再点击一次按钮，但如果我再次单击标题组件中的按钮，我将重置计时器。我该怎么做？

Answer 1

您可以使用clearTimeout清除计时器：

handleShowToast(message) {
    this.setState({ showToast: true, toastMessage: message});
    if (this.timer) {
        clearTimeout(this.timer)
    }
    this.timer = setTimeout(function() { 
        if(this.state.showToast){
            this.setState({ showToast: false });
        }
        this.timer = null;
    }.bind(this), 2000);
}

油门隐藏/显示组件ReactJs

1 个答案: