Throttle verstecken/zeigen Komponente ReactJs

Question

Ich bin neu auf reagieren und jetzt habe ich ein Problem. Ich habe in meiner app 3 Komponente: App Komponente:

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> 
    ); 
    } 
} 

In meinen Kopf Komponenten I auf der Schaltfläche klicken und hadleShowToast wird ausführen und Toast Component ist richtig dargestellt und es funktioniert, aber Ich würde (jetzt mache ich mit setInterval, aber funktioniert nicht, denn wenn ich ein zweites Mal klicken Sie die Taste sofort ausblenden, weil es eine Präzedenzfall setInterval) ausblenden Toast-Komponente, nach 2 Sekunden, wenn ich nicht erneut auf eine Schaltfläche klicken , aber wenn ich wieder Knopf in Header Komponente ich wou klicken d Timer zurücksetzen. Wie kann ich das tun?

Answer 1

Sie können clearTimeout klare Timer verwenden:

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); 
}