создание глобальной переменной в React для использования clearInterval

Я изучаю React и натыкаюсь на проблему, на которую уже несколько дней не могу найти ответ. Я пытаюсь сделать приложение, похожее на приложение обратного отсчета. в этом приложении я могу запустить обратный отсчет, но я не могу получить доступ к функции таймера для использования clearInterval, поскольку таймер ограничен в своей области действия. в любом случае я могу использовать таймер clearInterval, чтобы я мог приостановить функцию начала? В javascript vanilla я могу объявить таймер как глобальную переменную и получить к ней доступ где угодно, но в реакции я не знаю, как это сделать. буду очень признателен за вашу помощь

import React from 'react';
import ReactDOM from 'react-dom';

class Countdown extends React.Component{
    constructor(){
        super();
        this.state ={count:10};
    }

    render(){
        return(
            <div>
                <button onClick={()=>begin(this.state.count)}>start</button>
                <button>pause</button>
                <button>continue</button>
            </div>
        );
    }
};

const begin=(c)=>{
    let count = c;
    const timer = setInterval(countdown,1000);
    function countdown(){
        count=count-1
        if (count<0){
            clearInterval(timer);
            return; 
        }

        console.log(count)
    }
}

ReactDOM.render(<Countdown/>, document.getElementById('app'));

reactjs global-variables countdown clearinterval
person Nhat    schedule 28.11.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы бы предпочли определить функцию начала в самом классе компонента и объявить таймер как свойство класса, например

class Countdown extends React.Component{
    constructor(){
        super();
        this.state ={count:10};
        this.timer = null;
    }

    countdown = (count) => {
        count= count-1
        if (count<0){
            clearInterval(this.timer);
            return; 
        }

    }
    begin=() => {
      const count = this.state.count
      this.timer = setInterval(() => countdown(count),1000);

    }
    render(){
        return(
            <div>
                <button onClick={this.begin}>start</button>
                <button>pause</button>
                <button>continue</button>
            </div>
        );
    }
};
person Shubham Khatri    schedule 28.11.2017
comment
спасибо, но я не могу объявить константу внутри класса таким образом, консоль выдает ошибку неожиданного токена. - person Nhat; 28.11.2017
comment
Извините, моя ошибка, обновил код, вам не нужно объявлять его как константу - person Shubham Khatri; 28.11.2017
comment
Я только что объявил функцию обратного отсчета внутри функции начала до того, как вы опубликовали, и она работает, большое спасибо, теперь я могу очистить интервал по таймеру. кстати, если я удалю const, это выдаст мне еще одну ошибку, обратный отсчет не определен - person Nhat; 28.11.2017