Proste pole wprowadzania czasu reakcji

Wypróbuj Nasz Instrument Do Eliminowania Problemów

Pola wprowadzania czasu pozwalają użytkownikom wygodnie wybierać godziny w aplikacjach. W przeciwieństwie do wprowadzania tekstu zapewniają intuicyjny interfejs selektora. W tym przewodniku zawierającym ponad 6300 słów zbudujemy narzędzie wielokrotnego użytku Składnik wejściowy czasu reakcji od zera, korzystając z dostępnych znaczników i haków.

Domyślne implementacje przeglądarek

Możesz użyć natywnego |_+_| pole umożliwiające dodanie podstawowej funkcjonalności wybierania czasu:

|_+_|

Jednak implementacje natywne mają ograniczone możliwości dostosowywania. Chcemy większej kontroli nad stylem, rozmieszczeniem etykiet, podstawowym typem wartości, sprawdzaniem poprawności i integracją haków.

Cele funkcji

Nasz niestandardowy komponent wprowadzania czasu:

  • Wyświetl selektor godzin i minut
  • Obsługa myszy, klawiatury i dotyku
  • Postępuj zgodnie z dostępnymi standardami sieciowymi
  • Formatuj godziny AM/PM
  • Połącz się ze stanem React
  • Stylizuj za pomocą CSS-in-JS

Organizować coś

Zacznij od stworzenia projektu React:

|_+_|

Alternatywnie klon to repozytorium GitHub z plikami startowymi.

Zależności

Zainstaluj narzędzia daty:

|_+_|

Lokalizacja komponentu

Pakiet zbudujemy pod adresem:

|_+_|

Markup

Wewnątrz TimeInput.js dodaj podstawową instrukcję return:

|_+_|

Pojemnik

Najpierw zdefiniuj element kontenera, aby wszystko zawinąć:

|_+_|

Etykieta

Następnie dodaj widoczną etykietę opisującą przeznaczenie pola:

|_+_|

Wejście

Następnie utwórz rzeczywisty tekst, który użytkownik wpisuje:

|_+_|

Tworzymy z niego zwykłe pole tekstowe, które samodzielnie obsługuje analizę czasu.

Połącz elementy

Łącząc to wszystko w jedną całość:

|_+_|

Podstawowa stylizacja

Dodaj podstawowy CSS za pomocą Emotion dla stylizowanych komponentów:

|_+_|

W razie potrzeby dostosuj wymiary w pikselach lub użyj klas CSS.

Pomocnicy analizowania czasu

Aby obsłużyć konwersję między wartościami ciągu i czasu, zaimplementuj funkcje narzędziowe:

parseTimeValue

Konwertuje tekst na obiekt daty:

|_+_|

formatCzasWartość

Formatuje datę w ciąg znaków:

|_+_|

Wkrótce je zintegrujemy.

useTimeInput hak

Aby ułatwić separację logiki komponentów, zbudujemy niestandardowy hak o nazwie |_+_|.

Dodaj powyższy komponent TimeInput:

|_+_|

Stan wartości czasu

Śledź aktualnie wprowadzony czas:

|_+_|

Wartość wejściowa tekstu

Zarządzaj oddzielnie ciągiem wejściowym tekstu:

|_+_|

uchwytTimeChange

Aktualizuj stany, gdy zmienia się wprowadzany tekst:

|_+_|

Zwracane wartości

Ujawnij kluczowe elementy:

|_+_|

Zaimplementuj useTimeInput

Teraz zintegruj hak z komponentem TimeInput:

|_+_|

Powiąż wejście

Połącz wprowadzanie tekstu z modułami obsługi:

|_+_|

Aktualizacje będą przepływać przez hak!

Kontrolowane wejścia

Chcemy jawnie ustawić wartość ciągu wejściowego ze stanu. Jest to znane jako kontrolowany komponent .

Korzyści obejmują:

  • Wartość obsługiwana za pomocą kodu a wpisywanie przez użytkownika
  • Może formatować dane (maskowanie)
  • Prostsza logika walidacji
  • Lepsza testowalność

Kluczowym krokiem było powiązanie naszego stanu textInputValue z atrybutem wartości wejściowej.

Formatowanie wyświetlacza

Kiedy nastąpi poprawna analiza czasu, chcemy go sformatować w celu wyświetlenia.

Zaktualizuj metodę handleTimeChange:

|_+_|

Dane wejściowe będą teraz renderowane w oczyszczonym formacie GG:MM podczas typów użytkownika.

Wartość początkowa

Zezwalaj na przekazywanie początkowej wartości czasu:

|_+_|

Zastosowanie zewnętrzne:

|_+_|

Obsługa klawiatury

Aby ułatwić wprowadzanie czasu, dodaj funkcję klawiatury:

  • Strzałki w górę/w dół — zwiększanie/zmniejszanie minut
  • PageUp/PageDown — zwiększanie/zmniejszanie liczby godzin
  • Enter — Prześlij wartość

Najpierw zaimportuj wygodne, modyfikowalne metody Date:

|_+_|

Obsługa kluczowych zdarzeń

Następnie rozszerz handleTimeChange:

|_+_|

Sprawdź długość wartości, aby zapobiec dalszemu wpisywaniu, gdy jest pełna.

Zmień pomocników

Zdefiniuj logikę zmian wielokrotnego użytku:

|_+_|

Upraszcza obsługę klawiszy strzałek.

Kliknij Wsparcie

W przypadku zastosowań mobilnych zaimplementuj akcje dotykowe:

  • Kliknij godziny/minuty — pole ostrości do pisania
  • Przesuń palcem w górę/w dół nad polem – Zmień wartość

Stylizacja skupienia

Po pierwsze, ulepsz style, skupiając się na wprowadzaniu danych:

|_+_|

moduł obsługi onTouchStart

Następnie określ obszar docelowy dotyku:

|_+_|

Dopasowania pomagają izolować elementy dotykowe.

Uchwyć sesję dotykową

Następnie śledź wartości gestów:

|_+_|

Obsługa TouchEnd

Na koniec wykonaj mutację czasu po zwolnieniu dotyku:

|_+_|

Podobna logika działa w przypadku zmian godzin.

Dostępność klawiatury

Upewnij się, że osoby korzystające z klawiatur mogą prawidłowo nawigować:

|_+_|
  • funkcja autoComplete wyłączona zapobiega sugestiom wartości zewnętrznych
  • autoFocus automatycznie przesuwa kursor do pola

Zaimplementowano już solidną obsługę klawiatury z klawiszami strzałek.

Dostępność etykiet

Łączenie etykiet przynosi korzyści czytnikom ekranu:

|_+_|

Kliknięcie tekstu spowoduje teraz skupienie również powiązanych danych wejściowych.

Dostępność komponentów

Dalsze zwiększanie dostępności na poziomie komponentów:

|_+_|

Poprawia to ogólny kontekst i semantykę technologii wspomagających podczas interakcji z elementem DatePicker jako całością.

Moduły CSS

Alternatywnym podejściem do stylizacji jest użycie modułów CSS zamiast emocji:

|_+_|

Lokalnie określa zakresy nazw klas, aby uniknąć konfliktów.

Biblioteki stron trzecich

Aby uzyskać bardziej zaawansowane funkcje, takie jak rozmieszczanie popperów, animowane przejścia itp., skorzystaj z gotowych pakietów, takich jak:

Ale wdrożenie własnego zapewnia większą kontrolę i możliwości dostosowania.

Kontrolowane kontra niekontrolowane

Użyliśmy A kontrolowane wejście podejście, w którym wartość jest obsługiwana przez stan.

Alternatywnie, wejścia niekontrolowane pobrać wartości bezpośrednio z elementu DOM. Prostsze, ale traci elastyczność.

Przykłady przypadków użycia

Kilka przykładowych przypadków użycia komponentu TimeInput:

  • Aplikacje do planowania spotkań
  • Systemy rezerwacji/rezerwacji
  • Rozkłady transportu
  • Godziny otwarcia restauracji
  • Kierownik przyjęć pacjentów

Wszędzie tam, gdzie użytkownicy muszą wygodnie wybierać dokładne czasy!

Inne projekty

Powiązane samouczki:

  • Moduły CSS w React
  • Budowanie komponentu autouzupełniania w React
  • Niestandardowe paski przewijania reakcji
  • Suwak karuzeli obrazu

Daj mi znać inne tematy komponentów React UI, które Cię interesują!

Zobacz Też: