Сколько раз вы получали всплывающее уведомление на экране после нажатия на что-либо? Слишком много, чтобы сосчитать, верно? Что ж, в этом блоге я покажу вам, как вы тоже можете раздражать всех посетителей вашего сайта.
Что это за всплывающее окно? Чаще всего его называют всплывающим уведомлением или диалоговым окном:
Это круто, но как это работает? Я покажу вам, как создать собственное тост-уведомление с помощью React.
Шаг 1: Выберите HTML-элемент, для которого вы хотите активировать уведомление. Как правило, кнопка является хорошим выбором здесь. Мы собираемся сделать кнопку «Мне нравится», которая при нажатии добавляется в избранное.
Шаг 2: Перейдите к компоненту класса (убедитесь, что это класс, а не функциональный компонент, это будет иметь смысл позже), который содержит указанный элемент HTML, и настройте его по своему вкусу, т.е. кнопка работает и делает то, что должна минус тост-уведомление.
Теперь мы можем перейти к забавным вещам.
Шаг 3. Сначала нам нужно добавить импорт стиля из ‘styled-components’ в верхнюю часть нашего компонента, чтобы мы могли соответствующим образом оформить наше уведомление.
Шаг 4: Далее нам нужно создать контейнер и стилизовать его, чтобы было с чем поиграться и посмотреть, как мы работаем. (Многие стили CSS — это просто пробы и ошибки, поэтому лучше иметь некоторую основу для работы.) Это будет расположено вне компонента класса, который вы уже создали, содержащий вашу кнопку. Обратите внимание, что мы передаем свойства в top: CSS, это будет важно позже.
Шаг 5: Теперь мы хотим ввести наш компонент класса и добавить наш конструктор. Еще раз обратите внимание, что мы устанавливаем состояние приведенного выше Top:CSS, а также состояние this.timeout. Мы делаем это, потому что не хотим, чтобы тост-уведомление оставалось видимым навсегда, что было бы еще более раздражающим.
Шаг 6: Теперь мы можем приступить к написанию функций, которые на самом деле делают волшебство. Для этого нам нужно будет написать две функции. Одна функция showNotification() — это то, что активирует всплывающее уведомление, когда мы нажимаем нашу кнопку. Однако одного этого недостаточно. Что произойдет, если мы снова нажмем на нее? Она уже сработала… Итак, нам нужно написать вторую функцию onShow(), которая, по сути, сбрасывает нашу первую функцию, чтобы мы могли нажимать кнопку столько раз, сколько необходимо, и по-прежнему срабатывать уведомление.
Шаг 7: Наконец! Мы фактически добавляем всплывающее уведомление в наш Render(). Поэтому в этой ситуации вместо кнопки «Нравится» я сделал кликабельной иконку с сердечком. Теперь мы просто хотим добавить в Контейнер уведомление над нашим значком и разместить его вокруг текста, который мы хотим отобразить. Контейнер будет иметь добавленный дескриптор top={}, в котором мы пройдем через вышеуказанное состояние, чтобы оно либо отображало, либо скрывало наше уведомление.
Поздравляем! Ты сделал это! Теперь вы можете правильно раздражать или уведомлять любого, кто заходит на вашу страницу! Отличная работа!
