Как в react запустить таймер после клика на кнопку?

Здравствуйте!

Подскажите пожалуйста, как мне запустить таймер после клика на кнопку?

То есть, у меня есть кнопка:
<Button disabled={isSubmitting || nextButton} htmlType="submit" type="primary">
          Submit
        </Button>


После клика на которую должна сработать функция запуска таймера:
const [seconds, setSeconds] = useState(60);

    useEffect(() => {
        if (seconds > 0) {
          setTimeout(() => setSeconds(seconds - 1), 1000);
          toggleNextButton(true);
        } else {
          toggleNextButton(false);
        }
    });


Вывод таймера:
{seconds}

Вопрос, как при клике запустить таймер?..и по истечению таймера скрывать счетчик?

-----------------------------

Пробовал так:
5fbb6973a8840868574222.bin

<Button disabled={isSubmitting || nextButton} onClick={handleClick} htmlType="submit" type="primary">
          Submit
        </Button>


Но..не работает(
  • Вопрос задан
  • 6778 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
function App() {
  const [ seconds, setSeconds ] = React.useState(60);
  const [ timerActive, setTimerActive ] = React.useState(false);

  React.useEffect(() => {
    if (seconds > 0 && timerActive) {
      setTimeout(setSeconds, 100, seconds - 1);
    } else {
      setTimerActive(false);
    }
  }, [ seconds, timerActive ]);

  return (
    <div>
      {seconds
        ? <React.Fragment>
            <button onClick={() => setTimerActive(!timerActive)}>
              {timerActive ? 'stop' : 'start'}
            </button>
            <div>{seconds}</div>
          </React.Fragment>
        : <button onClick={() => setSeconds(60)}>ещё раз</button>
      }
    </div>
  );
}

https://jsfiddle.net/9rx1qhsy/1/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы