Вот мой код при нажатии на кнопку 'Получить код повторно' он запускает таймер , есть другая кнопка 'Назад' при её нажатии должна функция onClick() и countDown() перестать выполняться.
import './App.css';
import React, {useState , Component} from "react";
class Example extends React.Component {
constructor() {
super();
this.state = {
seconds: 10 ,
isTimerActive: false
};
this.timer = 0;
this.startTimer = this.startTimer.bind(this);
this.countDown = this.countDown.bind(this);
this.onClick = this.onClick.bind(this);
}
onClick(){
this.state.seconds = 10;
this.timer = 0
this.setTimerActive(true);
setTimeout(this.setTimerActive, 10000, false);
this.startTimer()
}
setTimerActive = isTimerActive => {
this.setState(() => ({ isTimerActive }));
}
startTimer() {
if (this.timer == 0 && this.state.seconds > 0) {
this.timer = setInterval(this.countDown, 1000);
}
}
countDown() {
let seconds = this.state.seconds - 1;
this.setState({
seconds: seconds,
});
if (seconds == 0) {
clearInterval(this.timer);
}
}
render() {
return(
<div >
{ this.state.isTimerActive ?
<span pointer-events= 'none'>Смс отправлено , повторная отправка возможно через {this.state.seconds}</span>
:
<span onClick={this.onClick.bind(this)}>Получить код повторно</span> }
<div>
<a>Назад</a>
</div>
</div>
);
}
}
export default Example;
