2017-02-06 6 views
1

Ich bin neu in Reactjs und bei der Verwendung von setTimeOut ich festgefahren, was ist der beste Weg zu stoppen it.Should ich clearTimeOut oder stopPropagation() zu stoppen.Wie SetTimeout onClick in Reactjs

Dies ist mein Code

render: function() { 
    return (< div className = "colorClick" 
     style = { 
     { 
      background: this.state.bgColor 
     } 
     } 
     onClick = { 
     this.detectColor 
     } > < /div><br/ > 
    ); 
    }, 
    calcTime: function() { 
    var time = Math.floor((Math.random() * 9) + 1); 
    this.setState({ 
     total_time: time 
    },() => { 
     window.setTimeout(this.calcTime, 250) 
    }); 
    }, 


    detectColor: function(event) { 
    window.clearTimeout(this.state.total_time); 
    window.clearTimeout(this.calcTime); 
    }, 


    componentDidMount: function() { 
    this.calcTime(); 
    }, 
    componentWillUnmount: function() { 
    this.detectColor(); 
    } 

In diesem Code ich clearTimeOut verwende, aber es ist nicht working.I wollen, dass, wenn ich auf div mit className="colorClick" klicken, sollte der setimeOut löschen und zurücksetzen.

Antwort

1

Es gibt einige schlechte Praktiken in Ihrem Code. Ich werde die Änderungen im Code kommentieren. Außerdem schätze ich, dass Sie React.createClass verwenden, was veraltet ist.

Verwenden Sie stattdessen die Klassensyntax. und wie Horia sagte, benötigen Sie den Timeout in einer Variablen zu speichern, so dass der gesamte Code in etwa so aussehen würde:

import React from 'react' 
class MyComponent extends React.Component { 

    // notice no ":" and no "function" 
    render() { 
    return (

     <div {/* no space between "<" and the div */} 
     className="colorClick" {/* no space around "=" */} 
     style={ { background: this.state.bgColor } } {/* no space around "=" */} 
     onClick={ this.clearTimeout } {/* no space around "=" */} 
     /> {/* div is self closing, use this when there's no childs */} 
    ); 
    } // no "," 

    calcTime() { 
    // use const if variable is not reassigned 
    const time = Math.floor((Math.random() * 9) + 1); 
    this.setState({ 
     total_time: time 
    },() => { 
     // assign timeout to component property 
     this.timeout = window.setTimeout(this.calcTime, 250) 
    }); 
    } 

    // no "event" passed as an argument since its: 
    // 1. unnecessary 
    // 2. doesn't exit when called in componentWillUnmount 
    // method name changed to clearTimeout since it's more accurately describe what it does 
    // notice fat arrow syntax to bind clearTimeout context to the class 
    clearTimeout =() => { 
    // use clearTimeout on the stored timeout in the class property "timeout" 
    window.clearTimeout(this.timeout); 
    } 

    componentDidMount() { 
    this.calcTime(); 
    } 

    componentWillUnmount() { 
    this.clearTimeout(); 
    } 
} 
3

Sie verwenden clearTimeout falsch. Sie müssen das Ergebnis window.setTimeout in einer Variablen speichern und dann window.clearTimeout mit dieser Variablen als Argument aufrufen. Hier ist ein Beispiel für w3schools, das zeigt dies.

+0

Ich bin schon so sein vorgeschlagen tun in w3school.The setTimeOut arbeiten an this.state .total_time und ich mache clearTimeOut, aber funktioniert immer noch nicht –

+0

Sie verwenden die Funktion calcTime als Parameter für clearTimeout. So funktioniert es nicht - es muss die ID von setTimeout zurückgegeben werden. Siehe auch die Dokumente von [MDN] (https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout), sozusagen die "Quelle der Wahrheit". –

Verwandte Themen