Enkelt inndatafelt for reaksjonstid

Prøv Instrumentet Vårt For Å Eliminere Problemer

Tidsinntastingsfelt lar brukere enkelt velge tider i apper. I motsetning til en tekstinntasting, gir de et intuitivt velgergrensesnitt. I denne guiden på 6300+ ord bygger vi en gjenbrukbar Inndatakomponent for reaksjonstid fra bunnen av ved hjelp av tilgjengelig markering og kroker.

Standard nettleserimplementeringer

Du kan bruke den opprinnelige |_+_| feltet for å legge til grunnleggende tidsvalgfunksjonalitet:

|_+_|

Innfødte implementeringer har imidlertid begrensede tilpasningsmuligheter. Vi ønsker mer kontroll over styling, etikettplassering, underliggende verditype, valideringer og hook-integrasjoner.



Funksjonsmål

Vår egendefinerte tidsinndatakomponent vil:

  • Vis timer og minutter velger
  • Støtt bruk av mus, tastatur og berøring
  • Følg tilgjengelige nettstandarder
  • Formater AM/PM ganger
  • Koble til React-tilstand
  • Stil med CSS-in-JS

Oppsett

Start med å lage et React-prosjekt:

|_+_|

Alternativt klone denne GitHub-repoen med startfiler.

Avhengigheter

Installer datoverktøy:

|_+_|

Komponentplassering

Vi bygger pakken på:

|_+_|

Markup

Inne i TimeInput.js legger du til den grunnleggende retursetningen:

|_+_|

Container

Først definerer du et beholderelement for å pakke alt:

|_+_|

Merkelapp

Deretter legger du til en synlig etikett som beskriver feltformålet:

|_+_|

Inndata

Lag deretter en faktisk tekstinndata brukeren skriver inn i:

|_+_|

Vi gjør det til et vanlig tekstfelt for å håndtere tid med å analysere selv.

Kombiner elementer

Ta det hele sammen:

|_+_|

Grunnleggende styling

Legg til grunnleggende CSS ved hjelp av Emotion for stylede komponenter:

|_+_|

Juster pikseldimensjoner eller bruk CSS-klasser etter behov.

Tidsanalysehjelpere

For å håndtere konvertering mellom streng- og tidsverdier, implementer hjelpefunksjoner:

parseTimeValue

Konverterer tekst til et Dato-objekt:

|_+_|

formatTidsverdi

Formaterer en dato til en streng:

|_+_|

Vi vil integrere disse snart.

bruk TimeInput Hook

For enklere komponentlogisk separasjon bygger vi en tilpasset krok kalt |_+_|.

Legg til denne TimeInput-komponenten ovenfor:

|_+_|

TimeValue State

Spor innlagt tid:

|_+_|

tekstInndataverdi

Administrer tekstinndatastreng separat:

|_+_|

handleTimeChange

Oppdater tilstander når tekstinndata endres:

|_+_|

Returverdier

Vis nøkkelenheter:

|_+_|

Implementer useTimeInput

Integrer nå kroken i TimeInput-komponenten:

|_+_|

Bind input

Koble tekstinndata til behandlere:

|_+_|

Oppdateringer vil strømme gjennom kroken!

Kontrollerte innganger

Vi ønsker å eksplisitt angi inngangsstrengverdien fra tilstand. Dette er kjent som en kontrollert komponent .

Fordelene inkluderer:

  • Verdi håndtert via kode kontra brukertasting
  • Kan formatere data (maskering)
  • Enklere valideringslogikk
  • Bedre testbarhet

Nøkkeltrinnet var å binde vår textInputValue-tilstand til input value-attributtet.

Formaterer skjerm

Når en gyldig tidsanalyse skjer, ønsker vi å formatere den på nytt for visning.

Oppdater handleTimeChange-metoden:

|_+_|

Inndataene vil nå gjengi et renset TT:MM-format som brukertyper.

Opprinnelig verdi

Tillat å sende en innledende tidsverdiprop:

|_+_|

Ekstern bruk:

|_+_|

Tastaturstøtte

Legg til tastaturfunksjonalitet for enklere inntasting:

  • Opp/Ned-piler - Øk/minsk minutter
  • PageUp/PageDown - Øk/minsk timer
  • Enter - Send inn verdi

Først importerer du praktiske mutable datometoder:

|_+_|

Håndtering av nøkkelhendelser

Forleng deretter handleTimeChange:

|_+_|

Sjekk verdilengden for å forhindre ytterligere skriving når den er full.

Endre hjelpere

Definer gjenbrukbar endringslogikk:

|_+_|

Forenkler håndtering av piltaster.

Trykk på Støtte

For mobilbruk, implementer berøringshandlinger:

  • Trykk timer/minutter - Fokusfelt for skriving
  • Sveip opp/ned over feltet - Endre verdi

Fokus Styling

Forbedre først stiler når input er fokusert:

|_+_|

onTouchStart Handler

Deretter bestemmer du berøringsmålområdet:

|_+_|

Fyrstikker hjelper til med å isolere berøringselementer.

Capture Touch Session

Spor deretter bevegelsesverdier:

|_+_|

TouchEnd Handler

Til slutt, utfør tidsmutasjon ved berøringsfrigjøring:

|_+_|

Tilsvarende logikk fungerer for timeendringer.

Tastaturtilgjengelighet

Sørg for at folk som stoler på tastaturer kan navigere på riktig måte:

|_+_|
  • autofullfør av forhindrer forslag til eksterne verdier
  • autofokus flytter automatisk markøren inn i feltet

Allerede implementert robust tastaturstøtte med piltaster.

Merk Tilgjengelighet

Å koble til etiketter er eksplisitt fordelaktig for skjermlesere:

|_+_|

Når du klikker på tekst, fokuseres også tilhørende inndata.

Komponenttilgjengelighet

Forbedre tilgjengeligheten ytterligere på komponentnivå:

|_+_|

Dette forbedrer den generelle konteksten og semantikken for hjelpeteknologier når du samhandler med DatePicker som helhet.

CSS-moduler

En alternativ stylingtilnærming er å bruke CSS-moduler i stedet for følelser:

|_+_|

Omfanger klassenavn lokalt for å unngå konflikter.

Tredjeparts biblioteker

For mer avanserte funksjoner som popperplasseringer, animerte overganger osv. – bruk forhåndsbygde pakker som:

Men å implementere din egen gir større kontroll og tilpasningsmuligheter.

Kontrollert vs ukontrollert

Vi brukte a kontrollert inngang tilnærming hvor verdi håndteres via stat.

Alternativt ukontrollerte innganger hente verdier direkte fra DOM-elementet. Enklere, men mister fleksibilitet.

Brukseksempler

Noen eksempler på bruk av TimeInput-komponenten:

  • Apper for møteplanlegging
  • Bestillings-/reservasjonssystemer
  • Transportplaner
  • Restaurantens åpningstider
  • Pasientavtaleansvarlig

Hvor som helst brukere trenger å velge nøyaktige tider praktisk!

Andre prosjekter

Relaterte opplæringsprogrammer:

  • CSS-moduler i React
  • Bygger AutoComplete-komponent i React
  • Egendefinerte Reager-rullefelt
  • Bildekarusell skyveknapp

Gi meg beskjed om andre React UI-komponentemner du vil være interessert i!

Se Også: