Вы правильно думаете, что проблема в handleClick.
У вас не правильно понимание, как писать компоненты в реакте. Если пишите функциональный компонент, то и пишите через хуки, если классовый, то через классы, а не фанкенштейна.
class Password extends Component {
constructor(props) {
super(props);
this.state = {
code: '',
password: '',
passwordConfirmation: '',
errors: [] ,
};
this.handlePasswordChange = this.handlePasswordChange.bind(this);
this.handlePasswordConfirmationChange = this.handlePasswordConfirmationChange.bind(this);
this.handleCodeChange = this.handleCodeChange.bind(this);
this.handleCodeMobileChange = this.handleCodeMobileChange.bind(this);
}
handleClick = () => {
console.log("Сработало");
// активируем счетчик
setIsTimerActive(true);
setTimeout(() => {
// сбрасываем
setIsTimerActive(false);
}, 60000);
}
App() {
const [isTimerActive, setIsTimerActive] = useState(false);
const [counter, setCounter] = React.useState(60);
React.useEffect(() => {
counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
handleClick()
}, [counter]);
}
render() {
return (
<a disabled={this.isTimerActive} onClick={handleClick} className="link-dashed">
{this.isTimerActive ?
<div>Смс отправлено повторная отправка возможна через: {this.counter}</div>
:
<span>Повторно отправить смс</span> }
</a>
);
}
}
Попробуйте примерно так. Но я в логику сильно не въезжал. App лучше вынесите в соседний компонент.
