Estoy tratando de hacer un simple botón de cuenta regresiva usando React JS. Está casi completo, sin embargo, hace una cuenta regresiva inmediatamente cuando quiero que solo comience la cuenta regresiva una vez que se hace clic en el botón.

El valor predeterminado es 10. Si no ingresa su propio valor, mayor que 0, comenzará una cuenta regresiva desde 10.

A continuación se muestra mi código:

import React, {Component} from 'react';
import './app.css';
import { Form, FormControl, Button } from 'react-bootstrap';

class Countdown extends Component {
    constructor(props){
        super(props);
        this.state={
            time: ''
        }
    }

    componentWillMount(){
        this.setState({time: 10});
    }

    componentDidMount(){
        setInterval(() => this.registerTime(this.state.time - 1), 1000);
    }

    registerTime(time){
        if(time >= 0){
            this.setState({time});
        }
    }

    countdown(){
        const textVal = document.getElementById('time-input').value;
        if(isNaN(textVal) || textVal == '' || textVal == ' ' || textVal <= 0){
            alert("Please enter a numeric value greater than 0!");
        } else{
            this.registerTime(textVal);
        }
    }

    render(){
        return(
            <div className="app">
                <h1>This is going to be a Countdown!</h1>
                <div>{this.state.time}</div>
                <Form inline>
                    <FormControl 
                        id="time-input"
                        placeholder="new time" 
                        onChange={event => {
                                if(event.target.value != '' && event.target.value != ' '){
                                    this.setState({time: event.target.value});
                                }
                            }}
                        onKeyPress={event => {
                                if(event.key === 'Enter'){this.countdown();}
                            }}
                        />
                    <Button onClick={event => this.countdown()} >Start</Button>
                </Form>
            </div>
        );
    }
}

export default Countdown;
1
God Complex 16 oct. 2018 a las 16:22

2 respuestas

La mejor respuesta

Ha iniciado el intervalo de inmediato cuando monta el componente. He creado una demostración funcional para ti en codepen. https://codepen.io/RutulPatel7077/pen/yRpzVB

1
Rutul Patel 16 oct. 2018 a las 13:43

¿Podría tener algo que ver con el método componentDidMount donde setInterval llama al registerTime cada 1 segundo?

0
Erik Castillo 16 oct. 2018 a las 13:31