在 React 中单击按钮时停止计时器

Posted 2023-02-22

【中文标题】在 React 中单击按钮时停止计时器

【英文标题】：Stop timer on button click in React

【发布时间】：2021-03-26 11:12:38

【问题描述】：

我正在开发一个应用程序，我有一个显示当前日期、小时、分钟和秒数的计时器。它每秒递增一次。我想要做的是在单击按钮时停止计时器，但我不确定为什么 clearInterval() 函数不起作用。我的代码是：

class Timer extends React.Component 

    constructor(props) 
        super(props);
        this.state = 
           timer: "",
        ;
    

    componentDidMount() 
        //current time
        setInterval(() => 
            this.setState(
                currentTime : new Date().toLocaleString()
            )
        , 1000)
    


   stopTimer = () => 
        clearInterval(this.state.currentTime)
  

   render() 
        return (
                <div>
                    <h4>Current time: this.state.currentTime</h4>
                    <Button onClick=this.stopTimer>Stop timer</Button>
                </div>
              )
   

【问题讨论】：

这能回答你的问题吗？ setInterval in a React app

【参考方案1】：

setInterval() 结果是intervalID，您应该将其用于clearInterval()。

this.state = 
  ...
  intervalId: ""
;

...

const intervalId = setInterval(() => 
   ...
, 1000);
this.setState( intervalId );

...

clearInterval(this.state.intervalId);

【参考方案2】：

您在错误的变量上使用了 clearInterval。你应该这样做。

我正在开发一个应用程序，我有一个显示当前日期、小时、分钟和秒的计时器。它每秒递增一次。我想要做的是在单击按钮时停止计时器，但我不确定为什么 clearInterval() 函数不起作用。我的代码是：

class Timer extends React.Component 

    constructor(props) 
        super(props);
        this.state = 
           timer: "",
           intervalId: ""
        ;
    

    componentDidMount() 
        //current time
       const intervalId =  setInterval(() => 
            this.setState(
                currentTime : new Date().toLocaleString()
            )
        , 1000); 

     this.setState(intervalId)
    


   stopTimer = () => 
     if (this.state.intervalId) 
       clearInterval(this.state.intervelId)
     
  

   render() 
        return (
                <div>
                    <h4>Current time: this.state.currentTime</h4>
                    <Button onClick=this.stopTimer>Stop timer</Button>
                </div>
              )