FadeIn und FadeOut Wirkung Reagieren JS mit

Question

Ich habe so etwas wie dies:

var Hello = React.createClass({ 
    getInitialState: function(){ 
    return { 
     opacity: 0 
    } 
    }, 

    handleClick: function(event){ 
    event.preventDefault(); 
    this.setState({opacity: 1}); 
    }, 

    render: function() { 
    return <div> 
     <div style={{opacity: this.state.opacity, transition: "opacity 1s"}}>Test</div> 
     <a href="" onClick={this.handleClick}>Click</a> 
    </div>; 
    } 
}); 

ReactDOM.render(
    <Hello name="World" />, 
    document.getElementById('container') 
); 

Hier ist jsfiddle

Ich möchte, dass div mit Text Test innerhalb von nicht beim Laden der Seite nicht angezeigt wird. Dann, wenn ich auf den Link klicke, dass dieser div erscheint. Das ist es, was dieses Beispiel tut.

Aber ich will, dass nachdem das Div nach dem Klick erscheint, ein paar Sekunden später wieder verschwindet. (Ich muss die Deckkraft irgendwie wieder auf 0 setzen).

Irgendwelche Ratschläge?

Answer 1

Sie können den FadeOut-Effekt hinzufügen, indem Sie eine Callback-Funktion an setState() übergeben.

Eine einfache Lösung wie diese

handleClick: function(event){ 
    event.preventDefault(); 
    this.setState({opacity: 1},() => setTimeout(() => this.setState({opacity:0}),4000)); 
}, 

jsfiddle

Eine bessere wäre

handleClick: function(event){ 
    event.preventDefault(); 
    this.setState({opacity: 1},() => { 
     if(!this.timeout) 
      clearTimeout(this.timeout); 
     this.timeout = setTimeout(() => this.setState({opacity:0}),4000); 
}); 

jsfiddle