Как остановить таймер в setInterval, нажав затем возобновить, нажав еще раз? - PullRequest
Новая
       53

Как остановить таймер в setInterval, нажав затем возобновить, нажав еще раз?

0 голосов
/ 11 января 2020

Я новичок в реакции, я пытаюсь написать компонент реакции, компонент имеет несколько функций.

  1. пользователь может ввести случайное число, тогда число будет отображаться и на странице.
  2. реализовать кнопку с текстовым значением 'start', после нажатия кнопки отображаемое числовое значение будет уменьшаться на единицу каждую секунду, а текстовое значение станет 'stop'.
  3. продолжить нажмите кнопку, минус одна остановится, и текстовое значение кнопки вернется к «пуску».
  4. , когда число, вычитаемое в 0, автоматически остановится.

Я реализовал первую и вторую функцию. но когда я пытаюсь нажать Стоп, чтобы число не уменьшалось до 1, это не работает.

Мне интересно, поскольку я использовал type=true/false, чтобы указать, что состояние типа - начало или остановка. Потому что в начальном состоянии число должно автоматически уменьшаться на 1. А в состоянии останова уменьшение на 1 должно останавливаться. Таким образом, функция таймера должна быть точной в зависимости от состояния типа.

Также я не уверен, правильно ли я использовал clearInterval метод.

Я действительно ценю, если кто-то может мне помочь.

код здесь: 

    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          details: [{ id: 1, number: "" }],
          type: false
        };
        this.handleClick = this.handleClick.bind(this);
      }
      changeNumber = (e, target) => {
        this.setState({
          details: this.state.details.map(detail => {
            if (detail.id === target.id) {
              detail.number = e.target.value;
            }
            return detail;
          })
        });
      };

      handleClick = () => {
        this.setState(prevState => ({
          type: !prevState.type
        }));
        if (this.state.type === false) {
          var myTimer = setInterval(
            () =>
              this.setState({
                details: this.state.details.map(detail => {
                  if (detail.id) {
                    detail.number = parseInt(detail.number) - 1;
                  }
                  return detail;
                })
              }),
            1000
          );
        } else if (this.state.type === true) {
          clearInterval(myTimer);
        }
      };

      render() {
        return (
          <div>
            {this.state.details.map(detail => {
              return (
                <div key={detail.id}>
                  Number:{detail.number}
                  <input
                    type="number"
                    onChange={e => this.changeNumber(e, detail)}
                    value={detail.number}
                  />
                  <input
                    type="button"
                    onClick={() => this.handleClick()}
                    value={this.state.type ? "stop" : "start"}
                  />
                </div>
              );
            })}
          </div>
        );
      }
    }

    export default App;

1 Ответ

0 голосов
/ 11 января 2020

Вам нужно объявить var myTimer вне функции handleClick().

Так что это что-то вроде: 

var myTimer;

...

handleClick = () => {
        this.setState(prevState => ({
          type: !prevState.type
        }));
        if (this.state.type === false) {
          myTimer = setInterval(
            () =>
              this.setState({
                details: this.state.details.map(detail => {
                  if (detail.id) {
                    detail.number = parseInt(detail.number) - 1;
                  }
                  return detail;
                })
              }),
            1000
          );
        } else if (this.state.type === true) {
          clearInterval(myTimer);
        }
      };
...