как использовать clearInteval, чтобы таймер очистил себя в ReactJS? - PullRequest
Новая
       10

как использовать clearInteval, чтобы таймер очистил себя в ReactJS?

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

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

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

Я реализовал первые три функции. но я не уверен, как начать последний. я должен установить другой clearInteval? на основе if statement когда таймер обратного отсчета 0?

код здесь: 


    var myTimer;

    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) {
          myTimer = setInterval(
            () =>
              this.setState({
                details: this.state.details.map(detail => {
                  if (detail.id) {
                    detail.number = parseInt(detail.number) - 1;
                  }
                  return detail;
                })
              }),
            1000
          );
        }
        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 голосов
/ 12 января 2020

просто добавьте 

if (detail.number === 0) {
 clearInterval(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;
                            if (detail.number === 0) {
                                clearInterval(myTimer);
                            }
                        }
                        return detail;
                    })
                }),
            1000
        );
    }
    if (this.state.type === true) {
        clearInterval(myTimer);
    }
};

Здесь у вас есть это решение на крючках:) 

const Test2 = () => {

    const [on, setOn] = useState(false)

    const initialDetails = [{ id: 1, number: "" }]
    const [details, setDetails] = useState(initialDetails)

    const changeNumber = (e, target) => {
        setDetails({ details: details.map(detail => { if (detail.id === target.id) { detail.number = e.target.value; } return detail; }) });
        if (this.state.details.number === 0) { setOn(false) }
    };


    const handleClick = () => {
        if (on === false) {myTimer = setInterval(() =>
                    setDetails({details: details.map(detail => {if (detail.id) {detail.number = parseInt(detail.number) - 1; if (detail.number === 0) {clearInterval(myTimer);} }
                            return detail;})}),1000);}
        if (on === true) { clearInterval(myTimer); }
    };

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