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

Question

[Александр Осадчий]

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

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

То есть, у меня есть кнопка:

<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}

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

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

Пробовал так:

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

Но..не работает(

Comments

[Алексей Уколов]

А как, по вашему, работает приведённый на скриншоте код? И зачем, как вы думаете, редактор что-то в нём подчёркивает красной линией?

[Александр Осадчий]

Алексей Уколов, Как это исправить?

[Алексей Уколов]

Что "это"? Подчёркивание? Первым шагом было бы навести на него и прочитать подсказку редактора.

Answer 1

[0xD34F]

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/

Comments

[Александр Осадчий]

Это очень круто, спасибо!

А не могли бы вы подсказать, как в этом коде отключить кнопку на время таймера?

То есть, я зашел на экран - идет таймер, а кнопка disabled..таймер прошел, кнопка активировалась..?

const StepResetInfo = ({ onNext, className }) => {
  const [seconds, setSeconds] = React.useState(60);
  const [timerActive, setTimerActive] = React.useState(false);

  React.useEffect(() => {
    if (seconds > 0 && timerActive) {
      setTimeout(setSeconds, 100, seconds - 1);
    }
  }, [seconds, timerActive]);
  setTimerActive(!timerActive);
  return (
    <>
      <div className={cx(styles.authWrap__main, className)}>
        <div className={styles.authWrap__cont}>
          <InfoBox data={data} />
          <div>{seconds}</div>
        </div>
      </div>
      <div className={cx(styles.authWrap__bottom, className)}>
        <Button disabled={timerActive ? '1' : '0'} onClick={onNext}>Reset password</Button>
      </div>
    </>
  );
};

[0xD34F]

Александр Осадчий,

setTimerActive(!timerActive);

Убил бы. Вы что, не понимаете, что эта хрень выполняется всякий раз при рендере компонента, и инициирует ещё один рендер?

disabled={timerActive ? '1' : '0'}

Boolean('0') // true - какая неожиданность, правда?

Ну а в целом - гадать, что там внутри Button, я конечно же не буду.