Задать вопрос
@PHPjedi
react

Какая логика здесь должна быть?

После отправке данных на backend, от backend`а приходит ответ. Нужно отобразить этот ответ на 4-5 секунд. Так реализовано в Instagram. Выглядит примерно так.

5cda959fc1bcc302207598.png

Это страничка отправки email для восстановления пароля.

Вопрос первый: Как думаете, правильное ли решением будет, если я весь этот код напишу в файле компонента?

Для входа и регистрации у меня целая экосистема. Все работает через Redux.

Вопрос второй: Какая логика здесь должна быть? Каким-то образом убрать через 4-5 секунд сообщение из state? 
( {this.state.message && <Alert message={this.state.message}/>} )


Как бы вы это реализовали? Сообщение появляется из нижней части страницы, а через пару секунд возвращается туда же (Исчезает).

Благодарю!
  • Вопрос задан
  • 77 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 2
hzzzzl
@hzzzzl
в родительском элементе в стейте пусть будет { showAlert: false, alertMessage: 'blabla' }
<Alert show={this.state.showAlert} /> пусть будет всегда и по умолчанию скрытый

когда надо, то 
this.setState({ showAlert: true, alertMessage: responseFromServer })
setTimeout( () => setState({ showAlert: false }), 5000 )


ну а в самом алерте пусть в зависимости он props.show добавляется класс с css-переходами итд

-
или всё то же самое через редукс, так же с таймаутом на 5 сек, после которого класс элемента меняется обратно на скрытый
Ответ написан
Комментировать
Комментировать
rockon404
@rockon404 Куратор тега React
Frontend Developer
Вопрос первый: Как думаете, правильное ли решением будет, если я весь этот код напишу в файле компонента?

Для входа и регистрации у меня целая экосистема. Все работает через Redux.

Лучше сделать по аналогии с остальным кодом.

Какая логика здесь должна быть? Каким-то образом убрать через 4-5 секунд сообщение из state?

setTimeout. Так же, по-хорошему, обрабатывать window.onblur и widow.onfocus. Еще надо очищать таймер в componentWillUnmount.

Сообщение появляется из нижней части страницы, а через пару секунд возвращается туда же (Исчезает).

transform, opacity, transition, @keyframes
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
RomReed
@RomReed
JavaScript, Flutter, ReactNative, Redux, Firebase
почему бы вам вместо Alert не воспользоваться любым Toast?
https://github.com/fkhadra/react-toastify
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
React разработчик
Uptrade
от 150 000 до 200 000 ₽
JS|React Native разработчик
Венста • Киров
от 60 000 до 120 000 ₽
Senior React Developer
DARS • Москва
от 200 000 до 300 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
8266 f12 требуется сделать ревью и оптимизировать работу
26 апр. 2024, в 20:42
2000 руб./за проект
Доработать и интегрировать модуль на WordPress
26 апр. 2024, в 19:53
5000 руб./за проект
Разработать Telegram mini app
15 апр. 2024, в 22:14
30000 руб./за проект
Ещё заказы