I campi di immissione dell'ora consentono agli utenti di selezionare comodamente gli orari nelle app. A differenza dell'input di testo, forniscono un'interfaccia di selezione intuitiva. In questa guida di oltre 6.300 parole, costruiremo un file riutilizzabile Componente di input del tempo di reazione da zero utilizzando markup e hook accessibili.
Implementazioni del browser predefinite
Puoi usare il nativo |_+_| campo per aggiungere funzionalità di selezione del tempo di base:
|_+_|Tuttavia, le implementazioni native hanno opzioni di personalizzazione limitate. Vogliamo un maggiore controllo sullo stile, sul posizionamento delle etichette, sul tipo di valore sottostante, sulle convalide e sulle integrazioni degli hook.
Obiettivi delle funzionalità
Il nostro componente di immissione del tempo personalizzato:
- Visualizza il selettore di ore e minuti
- Supporta l'utilizzo di mouse, tastiera e tocco
- Segui gli standard web accessibili
- Formato orari AM/PM
- Connettiti con lo stato Reagisci
- Stile con CSS-in-JS
Impostare
Inizia creando un progetto React:
|_+_|In alternativa, clona questo repository GitHub con i file iniziali.
Dipendenze
Installa le utilità della data:
|_+_|Posizione del componente
Costruiremo il pacchetto in:
|_+_|Markup
All'interno di TimeInput.js, aggiungi l'istruzione return di base:
|_+_|Contenitore
Innanzitutto, definisci un elemento contenitore per racchiudere tutto:
|_+_|Etichetta
Successivamente, aggiungi un'etichetta visibile che descriva lo scopo del campo:
|_+_|Ingresso
Quindi crea un input di testo effettivo in cui l'utente digita:
|_+_|Lo rendiamo un campo di testo normale per gestire noi stessi l'analisi del tempo.
Combina elementi
Mettendo tutto insieme:
|_+_|Stile di base
Aggiungi CSS di base utilizzando Emotion per i componenti con stile:
|_+_|Regola le dimensioni dei pixel o utilizza le classi CSS secondo necessità.
Aiutanti per l'analisi del tempo
Per gestire la conversione tra valori stringa e temporali, implementare le funzioni di utilità:
analizzareTimeValue
Converte il testo in un oggetto Data:
|_+_|formatTimeValue
Formatta una data in una stringa:
|_+_|Li integreremo a breve.
useTimeInputHook
Per una più semplice separazione logica dei componenti, creeremo un hook personalizzato chiamato |_+_|.
Aggiungi questo sopra il componente TimeInput:
|_+_|Stato timeValue
Traccia il tempo attualmente inserito:
|_+_|valore input testo
Gestisci la stringa di input di testo separatamente:
|_+_|handleTimeChange
Aggiorna gli stati quando cambia l'input di testo:
|_+_|Valori restituiti
Esporre le entità chiave:
|_+_|Implementare useTimeInput
Ora integra l'hook nel componente TimeInput:
|_+_|Associa input
Collega l'input di testo ai gestori:
|_+_|Gli aggiornamenti scorreranno attraverso il gancio!
Ingressi controllati
Vogliamo impostare esplicitamente il valore della stringa di input da state. Questo è noto come a componente controllata .
I vantaggi includono:
- Valore gestito tramite codice rispetto alla digitazione dell'utente
- Può formattare i dati (mascheramento)
- Logica di convalida più semplice
- Migliore testabilità
Il passaggio chiave è stato associare il nostro stato textInputValue all'attributo del valore di input.
Visualizzazione della formattazione
Quando si verifica un'analisi temporale valida, vogliamo riformattarla per la visualizzazione.
Aggiorna il metodo handleTimeChange:
|_+_|L'input ora restituirà un formato HH:MM pulito come tipi di utente.
Valore iniziale
Consenti il passaggio di una prop del valore temporale iniziale:
|_+_|Utilizzo esterno:
|_+_|Supporto per tastiera
Per inserire più facilmente l'ora, aggiungi la funzionalità della tastiera:
- Frecce su/giù: incrementa/diminuisce i minuti
- PaginaSu/PaginaGiù: incrementa/diminuisce le ore
- Invio: invia valore
Innanzitutto, importa comodi metodi Data modificabili:
|_+_|Gestione degli eventi chiave
Quindi estendi handleTimeChange:
|_+_|Controllare la lunghezza del valore per impedire un'ulteriore digitazione quando è pieno.
Cambia aiutanti
Definire la logica di modifica riutilizzabile:
|_+_|Semplifica la gestione dei tasti freccia.
Tocca Assistenza
Per l'utilizzo mobile, implementa le azioni touch:
- Tocca ore/minuti: campo attivo per la digitazione
- Scorrere verso l'alto/il basso sul campo: modificare il valore
Focus sullo stile
Innanzitutto, migliora gli stili quando l'input è focalizzato:
|_+_|gestore onTouchStart
Successivamente, determina l'area di destinazione del tocco:
|_+_|Le corrispondenze aiutano a isolare gli elementi touch.
Cattura sessione tattile
Quindi monitora i valori dei gesti:
|_+_|Gestore TouchEnd
Infine, esegui la mutazione temporale al rilascio del tocco:
|_+_|Una logica simile funziona per i cambi di ora.
Accessibilità da tastiera
Assicurati che le persone che utilizzano le tastiere possano navigare correttamente:
|_+_|- la disattivazione del completamento automatico impedisce i suggerimenti di valori esterni
- la messa a fuoco automatica sposta automaticamente il cursore nel campo
Già implementato un robusto supporto per tastiera con tasti freccia.
Accessibilità delle etichette
Il collegamento delle etichette offre vantaggi espliciti agli screen reader:
|_+_|Facendo clic sul testo verrà ora focalizzato anche l'input associato.
Accessibilità dei componenti
Migliorare ulteriormente l'accessibilità a livello di componente:
|_+_|Ciò migliora il contesto generale e la semantica per le tecnologie assistive quando si interagisce con DatePicker nel suo complesso.
Moduli CSS
Un approccio stilistico alternativo consiste nell'utilizzare i moduli CSS invece di Emotion:
|_+_|Ambisce localmente i nomi delle classi per evitare conflitti.
Librerie di terze parti
Per funzionalità più avanzate come posizionamenti di popper, transizioni animate, ecc., sfrutta pacchetti predefiniti come:
Ma implementarne uno personalizzato offre maggiore controllo e personalizzazione.
Controllato vs Incontrollato
Abbiamo usato a ingresso controllato approccio in cui il valore viene gestito tramite lo stato.
In alternativa, input incontrollati recuperare i valori direttamente dall'elemento DOM. Più semplice ma perde flessibilità.
Esempi di casi d'uso
Alcuni esempi di casi d'uso del componente TimeInput:
- App per la pianificazione delle riunioni
- Sistemi di prenotazione/prenotazione
- Orari dei trasporti
- Orari di apertura del ristorante
- Responsabile degli appuntamenti con i pazienti
Ovunque gli utenti debbano selezionare comodamente orari precisi!
Altri progetti
Tutorial correlati:
- Moduli CSS in React
- Creazione del componente di completamento automatico in React
- Barre di scorrimento di reazione personalizzate
- Dispositivo di scorrimento del carosello di immagini
Fammi sapere altri argomenti relativi ai componenti dell'interfaccia utente di React che ti interesserebbero!