Question

我正在学习React，我偶然发现了一个问题，几天前我找不到答案。我正在尝试制作类似于倒计时应用的应用。在这个应用程序中，我可以进行倒计时运行但我无法访问计时器功能以使用clearInterval，因为计时器在其功能范围内受到限制。无论如何我可以使用clearInterval ontimer所以我可以暂停开始功能？在javascript vanilla中，我可以将timer声明为全局变量并在任何地方访问它，但在反应中我不知道如何去做。我将非常感谢您的帮助

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

Answer 1

您更愿意在组件类本身中定义begin函数，并将计时器声明为类属性，如

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

在React中创建一个全局变量以使用clearInterval

1 个答案: