Czasami chcesz, aby Twoje aplikacje internetowe wyświetlały powiadomienie wskazujące, czy zdarzenie zakończyło się sukcesem, czy nie. Osobiście używam go do wyświetlania komunikatu, jeśli wystąpił błąd podczas połączenia z serwerem. Zawsze dobrze jest pokazać użytkownikowi swoją opinię, jeśli wydarzyło się coś nieoczekiwanego.

W tym samouczku wykonamy i zaprojektujemy w pełni niestandardowy komponent paska przekąsek wielokrotnego użytku, bez użycia jakichkolwiek zasobów zewnętrznych

Postępujemy jak poniżej:
1. Tworzenie nowej aplikacji reagującej.
2. Tworzenie i projektowanie naszego komponentu Snackbar.
3. Przycisk uruchamiający zdarzenie wyświetlające Snackbar.

Tworzenie nowej aplikacji reagującej

Stwórzmy nowy projekt reakcji według nazwy paska przekąsek, używając następującego polecenia:

npx create-react-app snackbar

Uruchommy utworzoną aplikację za pomocą npm start, otwórz przeglądarkę i przejdź do http://localhost:3000. Zobaczysz domyślną aplikację Reaguj.

Teraz przejdźmy dalej i ubrudzmy sobie ręce, tworząc nasz komponent baru z przekąskami.

Tworzenie i projektowanie naszego komponentu Snackbar

Otwórz nowo utworzony projekt paska przekąsek w dowolnym swoim ulubionym środowisku IDE. W moim przypadku jest to kod studia wizualnego.
Wewnątrz projektu przejdź do folderu src i utwórz w nim dwa pliki przekąskibar.js i przekąskibar.module.css.

Najpierw napiszmy szybko kod CSS dla paska przekąsek w przekąsce.module.css. module.css odnosi się do modułu css, co oznacza, że ​​wszystkie klasy i animacje css mają zasięg lokalny. Więcej informacji na ten temat można znaleźć na stronie https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet.

Wracając do projektowania części, poniżej znajduje się fragment kodu.

  • .snackbar to główna klasa CSS naszego paska Snackbar, która początkowo jest ukryta.
  • Klasa .snackbar.show sprawia, że ​​pasek Snackbar jest widoczny z efektem rozjaśniania i zanikania.

Stwórzmy teraz komponent paska przekąsek.
Poniżej znajduje się fragment kodu.

Komponent ten składa się z trzech głównych części

  • isActive: stan kontrolujący widoczność pasków przekąsek. Jeśli to prawda, to komponent ma klasę css .snackbar.show, która czyni go widocznym z efektem pojawiania się i zanikania, a gdy isActive ma wartość false, to komponent ma klasę css .snackbar, która czyni komponent niewidocznym lub ukrytym.
  • openSnackbar: jest to funkcja kontrolująca stan isActive. Po wykonaniu tej funkcji parametr isActive staje się prawdziwy, co sprawia, że ​​pasek Snackbar jest widoczny w odstępie czasu wynoszącym 3 sekundy, po czym parametr isActive staje się fałszywy. Funkcja openSnackbar ustawia również wyświetlanie komunikatu na pasku Snackbar.
  • wiadomość: jest to wiadomość wyświetlana na pasku przekąsek

Być może zastanawiasz się, dlaczego wiadomość nie jest stanem. Odpowiedź jest prosta, ponieważ nie chcemy, aby nasz komponent Snackbar był ponownie renderowany po zmianie wiadomości, ale po zmianie isActive.

Teraz wyraźnie widać z góry, że wystarczy uruchomić openSnackbar, aby wyświetlić pasek Snackbar lub wyskakujące powiadomienie w aplikacji reagującej.

Teraz dla prostej demonstracji zróbmy przycisk, aby to wykonać.

Przycisk uruchamiający zdarzenie powodujące wyświetlenie paska Snackbar

Dla uproszczenia dodałem przycisk w pliku App.js jak poniżej,

Jak widać, zaimportowałem komponent Snackbar i umieściłem go w dowolnym miejscu wewnątrz return. Zatem naszym następnym celem jest wykonanie funkcji openSnackbar komponentu Snackbar. W tym celu użyjemy refs. Stworzymy odnośnik za pomocą snackbarRef = React.createRef() i przekażemy utworzony pasek przekąsekRef do Snackbar ref jako <Snackbar ref = {this.snackbarRef} />
Jak widać, stworzyłem prosty przycisk i uruchomiłem openSnackbar po jego kliknięciu. Możesz dodać własną wiadomość, komunikat o błędzie lub cokolwiek chcesz. W tym przypadku po kliknięciu przycisku będzie wyglądać jak poniżej,

To wszystko, co zrobiłeś. To takie proste. Teraz możesz używać tego komponentu w dowolnym miejscu swojego projektu. Bardzo prosta, ale bardzo potężna funkcja.

To jest link do repozytorium github Snackbar https://github.com/Kroniac/react_snackbar

Daj mi znać, czy ten samouczek był dla Ciebie pomocny i w jakim przypadku go użyłeś.