是否有一种方法可以将变量传递在React外部函数内部的内部

Question

我是新手反应，我正在尝试制作一个简单的倒计时应用程序。但是在React中，我不知道如何为所有功能提供全球变量。请看一下我的代码，无论如何我可以停下来，继续按钮可以工作吗？在普通的JavaScript中，我可以将计时器设置为全局变量，并从另一个函数中获取它，当时我可以在计时器上调用Clear Interval功能由于在开始功能块中受到限制。

import React from 'react';
import ReactDOM from 'react-dom';
class Countdown extends React.Component{
    render(){
        return(
            <div>
                <button onClick={()=>begin()}>start</button>
                <button>pause</button>
                <button>continue</button>
            </div>
        );
    }
};
const begin=(props)=>{
    let count = 10;
    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

您可以这样做：

class Countdown extends React.Component{
    constructor() {
        super();
        //set the initial state
        this.state = { count: 10 };
    }
    //function to change the state
    changeCount(num){
      this.setState({count:num});
    }
    render(){
        return(
            <div>
                <button onClick={()=>begin(this.changeCount.bind(this), this.state.count)}>start</button>
                <button>pause</button>
                <button>continue</button>
                <p>{this.state.count}</p>
            </div>
        );
    }
};
//callback function to change the state in component
//c is the initial count in state
const begin=(fun, c)=>{
    let count = c;
    const timer = setInterval(countdown,1000);
    function countdown(){
        count=count-1
        if (count<0){
            clearInterval(timer);
            return; 
        }
        fun(count)
        console.log(count)
    }
}
ReactDOM.render(<Countdown/>, document.getElementById('example'));

在这里工作代码

Answer 2

为什么不声明React组件内的开始。当计数开始时，您还需要更新状态。我建议您看看https://reactjs.org/tutorial/tutorial.html。