Почему ошибок нету но и не работает функция?

Question

[Daniil]

Суть задачи при нажатие на кнопку "Повторно отправить смc" кнопка исчезает и появляется таймер
Сам код полностью рабочий проверял в отдельном тестовом проекте , но при добавление в проект не работает и не возникает ошибка. При нажатие на ссылку даже в консоле не выводиться слово. Думаю проблема в 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);
        
    }

    App() {
        const [isTimerActive, setIsTimerActive] = useState(false);
        const [counter, setCounter] = React.useState(60);
        React.useEffect(() => {
          counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
        }, [counter]);
        const handleClick = () => {
            console.log("Сработало");
          // активируем счетчик
          setIsTimerActive(true);
          setTimeout(() => {
            // сбрасываем
            setIsTimerActive(false);
          }, 60000);
        }
    }
render() {
        return (
                    <a disabled={this.isTimerActive} onClick={this.handleClick}  className="link-dashed"> 
                        {this.isTimerActive ? 
                               <div>Смс отправлено повторная отправка возможна через: {this.counter}</div> 
                                : 
                                <span>Повторно отправить смс</span> }
                    </a>
        );
    }
}

Вот отдельный код в тестовом проекте

import './App.css';
import React, {useState} from "react";

function App() {
  const [isTimerActive, setIsTimerActive] = useState(false);
  const [counter, setCounter] = React.useState(60);
  React.useEffect(() => {
    counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
  }, [counter]);
  const handleClick = () => {
    // активируем счетчик
    setIsTimerActive(true);
    setTimeout(() => {
      // сбрасываем
      setIsTimerActive(false);
    }, 60000);
  };
  return (
    <div>
         <a disabled={isTimerActive} onClick={handleClick}  className="btn">
          {isTimerActive ? <div className="spn">Смс отправлено повторная отправка возможна через: {counter}</div> : <span>Повторно отправить смс</span>}
        </a>
    </div>
    
  );
};

export default App ;

Answer 1

[Сергей Сунцев]

Вы правильно думаете, что проблема в 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 лучше вынесите в соседний компонент.