如何通过按下反应js中的按钮来启动计时器

Question

我需要确保按下按钮后，计时器会打开

我有一个计时器

class Timer extends React.Component {

  
  constructor() {
      super();
      this.state = {minute:0, second:0}
  }

  componentDidMount() {
      setInterval (() => {
          return this.setState((state) => {

              return{
                  second: state.second==59?0:state.second+1,
                  minute: state.second==59?state.minute+1:state.minute
              }
          });
      }, 1000);

      
  }
  render() {
      return (
          <p>{this.state.minute}:{this.state.second}</p>
      );
  }
  
  
}


ReactDOM.render(
  <React.StrictMode>
    <Timer />
  </React.StrictMode>,
  document.getElementById('timer')
);

和示例按钮

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('rollButton')
);

如何让它在按下按钮后开始渲染计时器？ 如果你也做一个定时器停止功能，我会很高兴）

看起来您的帖子主要是代码；请添加更多详细信息。

Answer 1

要使计时器工作，您首先需要添加 Toggle 组件作为 Timer 的子组件，因为您需要在两个组件之间传递状态。我还创建了一个函数来更新您的状态时间。

class Timer extends Component {
      constructor() {
        super();
        this.state = { minute: 0, second: 0 };
        this.updateTimer = this.updateTimer.bind(this);
      }
    
      updateTimer() {
        this.setState((state) => {
          return {
            second: state.second === 59 ? 0 : state.second + 1,
            minute: state.second === 59 ? state.minute + 1 : state.minute
          };
        });
      }
    
      render() {
        return (
          <>
            <p>
              {this.state.minute}:{this.state.second}
            </p>

            <Toggle updateTimer={this.updateTimer} />
          </>
        );
      }
    }

然后在 Toggle 组件上，您需要添加生命周期方法 componentDidUpdate。此方法的作用是检查道具或状态是否已更改/更新。所以在这个方法中，我们将检查切换按钮是否被点击，然后，如果它打开，我们运行 setInterval 回调，否则，我们清除间隔以便计时器暂停。我还添加了一个全局值以存储间隔（您也可以在此处使用 Refs）。如果您需要重置计时器，请将另一个方法作为道具传递给 Toggle 以清除停止时的状态。

import { Component } from "react";

class Toggle extends Component {
  constructor(props) {
    super(props);
    this.state = { isToggleOn: false };
    this.interval = null;
    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.isToggleOn !== this.state.isToggleOn) {
      if (this.state.isToggleOn) {
        this.interval = setInterval(this.props.updateTimer, 1000);
      } else {
        clearInterval(this.interval);
      }
    }
  }

  handleClick() {
    this.setState((prevState) => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? "OFF" : "ON"}
      </button>
    );
  }
}

export default Toggle;