Question

我正在React中结束我的Stopwatch项目，并且在countTimers方法中定义的每秒旋转秒数有问题。我将旋转状态定义为0（deg）。然后在setTimeval中的countTimers函数中将旋转状态更改为360（deg），然后设置条件： if(this.state.seconds > 0 || this.state.seconds < 60 && this.state.rotation === 360)尝试每秒执行一次转换，并在每次转换后将旋转状态设置为0（deg）。

import React, {Component} from 'react';

class Timer extends Component {
    constructor(props){
        super(props);

        this.state = {
            count: 0,
            pause: true,
            rotation: 0
        };
    }

    componentDidMount() {
        this.countTimers();
    }

    countTimers = () => {
        let counter = setInterval(() => {
            if (!this.state.pause) { 
                    this.setState({
                        count: this.state.count + 1,
                        rotation: 360
                    });

                    if(this.state.seconds > 0 || this.state.seconds < 60 && this.state.rotation === 360) {
                        document.querySelector('.seconds').style.transition = "all 0.1s ease";
                        document.querySelector('.seconds').style.transform= "rotateX(360deg)";
                    }

                    this.setState({
                        rotation: 0
                    });
            }
        }
        , 1000);
    }

    startHandler = () => {
        this.setState({
            pause: false
        })
    }

    pauseHandler = () => {
        this.setState({
            pause: true
        })
    }

仅在componentDidMount之后并单击开始按钮一次即可完成转换。

    render () {
        let days = Math.floor(this.state.count / (1 * 60 * 60 * 24));
        let hours = Math.floor((this.state.count % (1 * 60 * 60 * 24)) / (1 * 60 * 60));
        let minutes = Math.floor((this.state.count % (1 * 60 * 60)) / (1 * 60));
        let seconds = Math.floor((this.state.count % (1 * 60)) / 1);

        return (
            <div className="Timer">
                <h1>{'STOPWATCH'}</h1>
                <div className="stopwatch-wrapper">
                    <span className="days">{days}:</span>
                    <span className="hours">{hours}:</span>
                    <span className="minutes">{minutes}:</span>
                    <span className={"seconds"}>{seconds}</span>
                </div>
                <div className="buttons-wrapper">
                    <button id="start" onClick={this.startHandler}>START</button>
                    <button id="pause" onClick={this.pauseHandler}>PAUSE</button>
                </div>
            </div>
        );
    }
}

export default Timer;

有人知道如何解决此问题吗？

Answer 1

您遇到了很多问题，首先seconds不在状态中，因此更改轮换的条件永远不会返回true。接下来，您需要将spans display css属性设置为inline-block。最后，我们正在使用React！无需直接操作元素样式，在render函数中执行它就可以很好地工作，并且具有更多的Reacty。

运行下面的代码片段以查看其工作情况

class Timer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0,
      pause: true,
      rotation: 0
    };
  }

  componentDidMount() {
    this.countTimers();
  }

  countTimers = () => {
    let counter = setInterval(() => {
      if (!this.state.pause) {
        this.setState({
          count: this.state.count + 1,
          rotation: this.state.rotation === 359.9 ? 0 : 359.9,
        });
      }
    }, 1000);
  }

  startHandler = () => {
    this.setState({
      pause: false
    })
  }

  pauseHandler = () => {
    this.setState({
      pause: true
    })
  }

  render() {
    const {rotation, count} = this.state;
    let days = Math.floor(count / (1 * 60 * 60 * 24));
    let hours = Math.floor((count % (1 * 60 * 60 * 24)) / (1 * 60 * 60));
    let minutes = Math.floor((count % (1 * 60 * 60)) / (1 * 60));
    let seconds = Math.floor((count % (1 * 60)) / 1); 

    return (
      <div className="Timer">
          <h1>{'STOPWATCH'}</h1>
          <div className="stopwatch-wrapper">
              <span className="days">{days}:</span>
              <span className="hours">{hours}:</span>
              <span className="minutes">{minutes}:</span>
              <span className="seconds" style={{transform: `rotate(${rotation}deg)`}}>{seconds}</span>
          </div>
          <div className="buttons-wrapper">
              <button id="start" onClick={this.startHandler}>START</button>
              <button id="pause" onClick={this.pauseHandler}>PAUSE</button>
          </div>
      </div>
    );
  }
}

ReactDOM.render( <
  Timer / > ,
  document.getElementById("react")
);

.seconds{
  display: inline-block;
  transition: transform 500ms;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="react"></div>

在React中的秒表中每秒旋转秒数

1 个答案: