react-hook-formin määrittäminen Controller-komponentin kanssa
Asentakaa react-hook-form, luokaa lomakeinstanssi useFormilla ja käärikää jokainen TextInput Controller-komponenttiin sen rekisteröimiseksi sekä onChange- ja onBlur-tapahtumien vastaanottamiseksi.
react-hook-formin määrittäminen Controller-komponentin kanssa on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Miksi react-hook-form?
react-hook-form on suorituskykyinen ja joustava kirjasto lomakkeiden rakentamiseen Reactilla ja React Nativella. Toisin kuin kytkettäessä jokainen syötekenttä manuaalisesti useState-tilaan, react-hook-form käyttää kontrolloimattomia syötteitä renderöintikertojen vähentämiseksi. Se yhdistää validoinnin, virheenkäsittelyn ja lomakkeen lähettämisen yhtenäiseksi APIksi ja toimii saumattomasti minkä tahansa käyttöliittymäkomponenttikirjaston kanssa Controller-wrapperin avulla.
react-hook-formin asentaminen
Asenna react-hook-form npm:stä. Sillä ei ole riippuvuuksia, ja se toimii kaikkien Reactin 16.8:aa uudempien versioiden kanssa. Erityisiä määrityksiä ei tarvita: asennuksen jälkeen voit tuoda sen hookit ja komponentit suoraan React Native -komponentteihisi.
npm install react-hook-formLomakeinstanssin luominen useFormilla
Luo lomakeinstanssi kutsumalla useForm()-hookia komponenttisi alussa. Se palauttaa useita apuvälineitä: control (syötteiden kytkemiseen Controllerin avulla), handleSubmit (lomakkeen lähettämiseen), formState.errors (validointivirheiden näyttämiseen) ja reset (kaikkien kenttien tyhjentämiseen). Välitä oletusarvot useForm-hookille lomakkeen esitäyttämistä varten.
import { useForm } from 'react-hook-form';
interface LoginForm {
email: string;
password: string;
}
export default function LoginScreen() {
const {
control,
handleSubmit,
formState: { errors },
reset,
} = useForm<LoginForm>({
defaultValues: { email: '', password: '' },
});
}TextInputin kääriminen Controllerilla
React Nativessa syötteet ovat kontrolloituja komponentteja, jotka on käärittävä Controller-komponenttiin, jotta react-hook-form voi hallita niiden arvoja. Välitä control-objekti, kentän name ja render-prop. Render-prop saa parametrina field-objektin, joka sisältää value-, onChange- ja onBlur-arvot TextInput-komponenttiin kytkemistä varten.
import { Controller } from 'react-hook-form';
<Controller
control={control}
name='email'
render={({ field: { onChange, onBlur, value } }) => (
<TextInput
value={value}
onChangeText={onChange}
onBlur={onBlur}
placeholder='Email'
keyboardType='email-address'
autoCapitalize='none'
/>
)}
/>Validointisääntöjen lisääminen
Välitä Controller-komponentille rules-prop validointiehtojen määrittämistä varten. required-sääntö merkitsee kentän pakolliseksi, minLength määrittää merkkien vähimmäismäärän, maxLength rajoittaa syötteen pituutta ja pattern validoi syötteen säännöllistä lauseketta vasten. Jokainen sääntö saa objektin, joka sisältää value-arvon ja säännön epäonnistuessa näytettävän message-merkkijonon.
<Controller
control={control}
name='email'
rules={{
required: { value: true, message: 'Email is required' },
pattern: {
value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
message: 'Enter a valid email address',
},
}}
render={({ field: { onChange, onBlur, value } }) => (
<TextInput value={value} onChangeText={onChange} onBlur={onBlur} />
)}
/>Kenttävirheiden näyttäminen
Kun Controller on validoinut kentän, mahdollinen virhe löytyy kohteesta formState.errors[fieldName]. Käytä sen message-ominaisuutta ja renderöi viesti syötekentän alapuolelle punaisessa Text-komponentissa. Virheet näytetään vasta, kun kenttää on käsitelty (onBlur) tai kun lähettämistä on yritetty ensimmäisen kerran. Näin liian aikaiset virheilmoitukset vältetään.
<Controller
control={control}
name='email'
rules={{ required: 'Email is required' }}
render={({ field: { onChange, onBlur, value } }) => (
<View>
<TextInput
value={value}
onChangeText={onChange}
onBlur={onBlur}
style={[styles.input, errors.email && styles.inputError]}
/>
{errors.email && (
<Text style={styles.errorText}>{errors.email.message}</Text>
)}
</View>
)}
/>Lomakkeen lähettäminen handleSubmitilla
Kääri lähetyskäsittelijäsi handleSubmit-funktion ympärille. react-hook-form suorittaa ensin kaikki validointisäännöt. Jos jokin kenttä on virheellinen, se täyttää formState.errors-objektin eikä kutsu käsittelijääsi. Jos kaikki kentät ovat kelvollisia, käsittelijä saa tyypitetyn objektin, joka sisältää kaikkien kenttien arvot ja on valmis lähetettäväksi APIin.
async function onSubmit(data: LoginForm) {
console.log('Submitting:', data.email, data.password);
try {
await authApi.login(data.email, data.password);
navigation.replace('Home');
} catch (err) {
Alert.alert('Login Failed', 'Invalid email or password.');
}
}
<Button title='Log In' onPress={handleSubmit(onSubmit)} />Salasanakentän määritys
Salasanakentissä voit piilottaa kirjoitetut merkit asettamalla secureTextEntry-arvon ja määrittämällä sopivan näppäimistötyypin. Kytke kenttä Controlleriin samalla tavalla kuin sähköpostikenttä. Monet sovellukset lisäävät myös näytä/piilota-kuvakkeen, joka vaihtaa secureTextEntry-arvoa paikallisen tilan avulla. Tämä parantaa käytettävyyttä, koska käyttäjät voivat tarkistaa kirjoitusvirheet.
<Controller
control={control}
name='password'
rules={{
required: 'Password is required',
minLength: { value: 8, message: 'Password must be at least 8 characters' },
}}
render={({ field: { onChange, onBlur, value } }) => (
<TextInput
value={value}
onChangeText={onChange}
onBlur={onBlur}
secureTextEntry
placeholder='Password'
/>
)}
/>Kentän arvojen tarkkailu watchilla
useForm-hookin palauttaman watch-funktion avulla voit seurata kentän nykyistä arvoa ja reagoida muutoksiin reaaliajassa. Yleinen käyttötapaus on Salasana uudelleen -kenttä, jonka arvon on vastattava salasanakentän arvoa. Välitä kentän nimi watch-funktiolle ja käytä palautettua arvoa vahvistuskentän validate-säännössä.
const { control, handleSubmit, watch, formState: { errors } } = useForm<RegisterForm>();
const password = watch('password');
<Controller
control={control}
name='confirmPassword'
rules={{
validate: (value) =>
value === password || 'Passwords do not match',
}}
render={({ field }) => <TextInput {...field} secureTextEntry />}
/>Lomakkeen nollaaminen
Tyhjennä kaikki kenttien arvot ja virheet kutsumalla reset()-funktiota. Tällöin lomake palautuu oletusarvoihinsa. Voit myös välittää reset({ email: 'prefilled@example.com' })-funktiolle uudet arvot ja alustaa lomakkeen uudelleen eri oletusarvoilla. Tämä on hyödyllistä profiilin muokkauslomakkeissa, joissa olemassa olevat käyttäjätiedot esitäytetään.
// Clear after successful submit:
async function onSubmit(data: LoginForm) {
await api.login(data);
reset(); // clears all inputs
}
// Pre-fill with existing profile data:
useEffect(() => {
if (userProfile) {
reset({
name: userProfile.name,
email: userProfile.email,
});
}
}, [userProfile]);Lomakkeen validointitilat
react-hook-form tarjoaa useita mode-asetuksia, jotka määrittävät, milloin validointi suoritetaan: 'onSubmit' (oletus, validoi vain lähetyksen yhteydessä), 'onBlur' (validoi kentän menettäessä kohdistuksen), 'onChange' (validoi jokaisen näppäinpainalluksen yhteydessä) ja 'all' (yhdistää onBlur- ja onChange-tilat). Mobiililomakkeissa 'onBlur' tarjoaa parhaan tasapainon välittömän palautteen ja kirjoittamisen aikaisten häiritsevien virheiden välttämisen välillä.
const { control, handleSubmit } = useForm<LoginForm>({
mode: 'onBlur', // validate when user leaves a field
defaultValues: { email: '', password: '' },
});Pikatarkistus
Testaa, miten hyvin ymmärrät tämän oppitunnin React Native Mobile Development -aiheiset käsitteet.
Oppitunnin kertaus
Tässä oppitunnissa opitte, että useForm luo lomakeinstanssin, joka sisältää control-, handleSubmit- ja formState.errors-arvot, Controller yhdistää natiivikomponentit TextInput-lomakkeeseen onChange-, onBlur- ja value-propsien avulla, ja rules määrittää sisäänrakennetut validointirajoitteet, jotka täyttävät errors-arvot automaattisesti. Seuraavaksi perehdymme tarkemmin validointisääntöihin ja virheilmoitusten käsittelyyn.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”react-hook-formin määrittäminen Controller-komponentin kanssa” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “react-hook-formin määrittäminen Controller-komponentin kanssa”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”react-hook-formin määrittäminen Controller-komponentin kanssa”?
Asentakaa react-hook-form, luokaa lomakeinstanssi useFormilla ja käärikää jokainen TextInput Controller-komponenttiin sen rekisteröimiseksi sekä onChange- ja onBlur-tapahtumien vastaanottamiseksi. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”react-hook-formin määrittäminen Controller-komponentin kanssa”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?
Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- react-hook-formin määrittäminen Controller-komponentin kanssa
- Validointisäännöt ja virheilmoitukset
- Monivaiheiset lomakkeet lomakkeen tilan avulla
- Lomakkeiden lähettäminen ja nollaaminen