React Native-formulieren: invoer, validatie en het toetsenbord
Gids voor React Native-formulieren en validatie
React Native-formulieren: controlled inputs en validatie | We.Inc
Bouw een React Native-formulier met controlled TextInputs, één validatiefunctie, foutmeldingen onder elk veld en toetsenbordafhandeling. Probeer de validatie live in uw browser.
Een betrouwbaar React Native-formulier heeft drie onderdelen nodig: TextInputs die door state worden aangestuurd, één validatiefunctie die per veld een fout teruggeeft, en toetsenbordafhandeling. Toon elke melding pas als iemand dat veld heeft verlaten of op verzenden heeft gedrukt. Zet het scherm in een KeyboardAvoidingView en stel keyboardShouldPersistTaps="handled" in op de ScrollView, zodat de verzendknop bereikbaar blijft.
Onderdelen van een React Native-formulier
Taak
Hulpmiddel
De waarden bewaren
useState met één object, of één hook per veld
De waarden controleren
Een pure functie validate(values) die een errors-object teruggeeft
Fouten tonen
Text onder elk veld, gekoppeld via accessibilityLabel of een live region
Velden zichtbaar houden
KeyboardAvoidingView met behavior="padding" op iOS
Op verzenden tikken met open toetsenbord
keyboardShouldPersistTaps="handled" op de ScrollView
Tussen velden wisselen
returnKeyType="next" en focus() op de volgende ref
De validatieregels op deze pagina zijn gewoon JavaScript, dus de preview hieronder draait precies de functie die u in uw React Native-scherm zou plakken. Vul de velden in, verlaat ze en druk op Account aanmaken om elke melding te zien verschijnen en verdwijnen.
Elk veld schrijft via onChangeText naar één values-object.
onBlur markeert een veld als aangeraakt, zodat de fout kan verschijnen zonder iemand midden in het typen toe te schreeuwen.
validate(values) draait bij elke render en geeft een object terug met een melding per overtreden regel.
Verzenden markeert elk veld als aangeraakt en stopt als het errors-object sleutels bevat.
Zijn er geen fouten meer, dan verstuurt de handler de waarden en kan hij Keyboard.dismiss() aanroepen.
Houd validate puur, zodat u het kunt testen zonder iets te renderen en het op de server kunt hergebruiken.
Schakel de verzendknop niet uit zolang het formulier ongeldig is; door erop te drukken ontdekken veel mensen wat er ontbreekt.
Zet de fouttekst direct onder het bijbehorende veld, in woorden die zeggen hoe het probleem op te lossen is.
Trim e-mailadressen voordat u ze controleert; een meegeplakte spatie aan het eind is de meest voorkomende onterechte fout.
Controleer alles opnieuw op de server. Regels in de client helpen mensen op weg, maar zijn niet te vertrouwen.
Veelgestelde vragen
Heb ik een formulierbibliotheek nodig in React Native?
Nee. Een paar velden werken prima met useState en een validatiefunctie zoals die op deze pagina. Bibliotheken helpen als een formulier veel velden, geneste arrays of asynchrone controles heeft, en React Hook Form omschrijft zichzelf als werkend op het web en in React Native.
Hoe voorkom ik dat het toetsenbord mijn invoervelden bedekt?
Zet het formulier in een KeyboardAvoidingView. Die past zijn hoogte, positie of padding onderaan aan het toetsenbord aan; behavior="padding" is de gebruikelijke keuze op iOS. keyboardVerticalOffset houdt rekening met een header boven de view en staat standaard op 0.
Waarom moet ik twee keer op mijn verzendknop tikken?
keyboardShouldPersistTaps van de ScrollView staat standaard op "never", dus de eerste tik sluit alleen het toetsenbord. Zet het op "handled" en de knop krijgt de tik meteen.
Hoe sluit ik het toetsenbord na het verzenden?
Roep Keyboard.dismiss() aan, dat volgens de documentatie het actieve toetsenbord sluit en de focus weghaalt.
Wanneer u een fout toont
Elke regel in het rood tonen zodra het scherm opent, voelt als een berisping. Houd bij welke velden iemand heeft aangeraakt en toon een melding pas nadat die persoon het veld verlaat, of na een verzendpoging.
Staat er eenmaal een melding, voer de controle dan bij elke toetsaanslag opnieuw uit, zodat die verdwijnt zodra de waarde geldig wordt. Die directe bevestiging is de beloning voor het wachten met tonen.
Fouten toegankelijk maken
Alleen een rode rand zegt niets tegen iemand die een schermlezer gebruikt of slecht kleuren ziet. Schrijf het probleem als tekst uit en neem het op in de accessibilityLabel van het veld, zodat het wordt voorgelezen als de focus daar komt.
Op Android zorgt accessibilityLiveRegion="polite" op de fout-Text ervoor dat TalkBack de melding aankondigt als die verschijnt, zonder de focus te verplaatsen.
Formuliercode om te kopiëren
De validatiefunctie
Gewoon JavaScript zonder React Native-imports, dus het draait in tests, in de webpreview en op een server.
Aanmeldscherm met aangeraakte velden en toetsenbordafhandeling
Eén values-object, één touched-object, en een Field-helper die zijn fout alleen toont wanneer dat hoort.
Vul uw naam in.
Vul uw e-mailadres in.
Dit e-mailadres mist een @ of een domein.
Gebruik minstens 8 tekens.
De twee wachtwoorden komen niet overeen.
Validatiepreview
De controles draaien de validatiefunctie uit de code hieronder. Meldingen verschijnen nadat u een veld verlaat of op de knop drukt.
Naam
Wachtwoord
Wachtwoord bevestigen
Account aanmaken
Alle velden zijn geldig. Een echte app zou de waarden nu versturen.