@D_K_D
Junior

Как сделать чтобы после нажатия на кнопку она исчезала на одну минуту с отсчётом а потом снова появлялась?

Есть кнопка как сделать так чтобы при нажатии на неё показывало сообщение что "Кнопка нажата" и за место кнопки появлялся таймер с отсчётом в минуту .После истечение времени кнопка снова появлялась.
import React from 'react';
import './App.css';

function App() {
 return (
<button>Повторно отправить смс</button>
  );
};

export default App;
  • Вопрос задан
  • 164 просмотра
Решения вопроса 1
ktim8168
@ktim8168
Frontend Developer
const App = () => {
  const [isTimerActive, setIsTimerActive] = useState(false);

  const handleClick = () => {
    // активируем счетчик
    setIsTimerActive(true);
    setTimeout(() => {
      // сбрасываем
      setIsTimerActive(false);
    }, 1000);
  };

  return (
    <button disabled={isTimerActive} onClick={handleClick}>
      {isTimerActive ? 'loading...' : 'Повторно отправить смс'}
    </button>
  );
};

export default App;
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
amorphis
@amorphis
Технолог в Студии Артемия Лебедева
Примерный план такой:
- написать обработчик события onclick, который прячет кнопку и запускает таймер на минуту
- написать таймер который раз в секунду обновляет текст, показывая сколько осталось и по истечении времени показывает кнопку обратно
Ответ написан
Комментировать
devellopah
@devellopah
Смена кусков интерфейса реализуется через условный рендеринг

{this.state.secondsLeft
    ?  <Countdown secondsLeft={this.secondsLeft} />
    :  <Form runTimer={this.runTimer} />}


нужно выполнить props.runTimer на успешный сабмит формы
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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