Monivaiheiset lomakkeet lomakkeen tilan avulla
Jakakaa pitkä rekisteröitymislomake useaan vaiheeseen tilassa olevan vaihelaskurin avulla ja validoikaa vain nykyisen vaiheen kentät ennen seuraavaan siirtymistä.
Monivaiheiset lomakkeet lomakkeen tilan avulla on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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.
Mikä on monivaiheinen lomake?
Monivaiheinen lomake jakaa pitkän rekisteröinti- tai maksuprosessin erillisiin, hallittaviin vaiheisiin — yleensä 2–5 näyttöön. Jokainen vaihe keskittyy toisiinsa liittyvään kenttäryhmään, mikä vähentää kognitiivista kuormitusta ja parantaa lomakkeen täyttämisastetta yhteen pitkään vieritettävään lomakkeeseen verrattuna. Yleisiä esimerkkejä ovat käyttöönoton ohjatut toiminnat, osoitteen ja maksun sisältävät maksuprosessit sekä monivaiheinen profiilin määritys.
Yhden lomakeinstanssin jakaminen vaiheiden kesken
react-hook-form-toteutuksen monivaiheisen lomakkeen ydin on luoda yksi useForm-instanssi koko lomakkeelle ja välittää control- ja errors-arvot props-arvoina kullekin vaihekomponentille. Näin kaikki kenttien arvot ja validointitila pysyvät yhdessä paikassa. Vaiheessa 1 syötetyt arvot ovat käytettävissä, kun käyttäjä siirtyy vaiheeseen 3, ja viimeisen vaiheen lähetys saa käyttöönsä koko lomakkeen tiedot.
interface RegisterForm {
name: string;
email: string;
password: string;
phone: string;
city: string;
}
export default function RegisterScreen() {
const [step, setStep] = React.useState(1);
const form = useForm<RegisterForm>({ defaultValues: { name: '', email: '', password: '', phone: '', city: '' } });
return (
<View style={styles.container}>
{step === 1 && <Step1AccountInfo form={form} />}
{step === 2 && <Step2ContactDetails form={form} />}
{step === 3 && <Step3Review form={form} onSubmit={handleFinalSubmit} />}
</View>
);
}Vaihekomponenttien propsien määrittäminen
Kukin vaihekomponentti vastaanottaa lomakeinstanssin propsina. Määrittäkää propille TypeScript-tyyppi käyttämällä react-hook-formin UseFormReturn-tyyppiä. Näin vaihekomponentti pääsee käsiksi control-, formState.errors-, trigger- ja watch-arvoihin — kaikkiin työkaluihin, joita se tarvitsee omien kenttiensä näyttämiseen ja validoimiseen.
import type { UseFormReturn } from 'react-hook-form';
interface StepProps {
form: UseFormReturn<RegisterForm>;
onNext?: () => void;
}
export function Step1AccountInfo({ form, onNext }: StepProps) {
const { control, formState: { errors } } = form;
// Render only name, email, and password fields
}Vain nykyisen vaiheen validoiminen
Validoikaa ennen seuraavaan vaiheeseen siirtymistä vain nykyisen vaiheen kentät käyttämällä form.trigger(['fieldA', 'fieldB'])-kutsua. Se suorittaa määritettyjen kenttien validoinnin ja palauttaa Promisen, joka ratkaistaan arvoon true, jos kaikki kentät ovat kelvollisia. Jos jokin kenttä ei läpäise validointia, virheet näytetään eikä käyttäjä voi jatkaa ennen niiden korjaamista. Myöhempien vaiheiden kenttiä ei vielä validoida.
async function handleNext() {
const step1Fields: (keyof RegisterForm)[] = ['name', 'email', 'password'];
const isValid = await form.trigger(step1Fields);
if (isValid) {
setStep(2);
}
// If invalid, formState.errors is populated for the listed fields
}Edistymisen ilmaisin käyttöliittymässä
Lisätkää näytön yläreunaan visuaalinen edistymispalkki tai vaiheiden ilmaisin, jotta käyttäjä tietää, kuinka pitkällä hän on. Laskekaa edistyminen kaavalla (currentStep / totalSteps) * 100. Animoidun View-komponentin leveyteen perustuva yksinkertainen edistymispalkki antaa selkeää palautetta ja auttaa hahmottamaan, kuinka paljon lomakkeen valmistumiseen vielä tarvitaan.
const TOTAL_STEPS = 3;
function ProgressBar({ current }: { current: number }) {
const progress = (current / TOTAL_STEPS) * 100;
return (
<View style={styles.progressContainer}>
<View style={[styles.progressFill, { width: progress + '%' }]} />
</View>
);
}
// Usage:
<ProgressBar current={step} />Vaiheiden välillä siirtyminen
Seuratkaa nykyistä vaihetta useState-tilassa olevan vaiheiden laskurin avulla. Next-painikkeiden tulee validoida nykyisen vaiheen kentät trigger-kutsulla ennen vaiheen kasvattamista. Back-painikkeet pienentävät vaihetta suorittamatta uutta validointia. Poistakaa Next-painike käytöstä tai näyttäkää latausilmaisin aina, kun asynkroninen validointi, kuten käyttäjänimen saatavuuden tarkistus, on käynnissä.
const { formState: { isValidating } } = form;
function NavigationButtons() {
return (
<View style={styles.navRow}>
{step > 1 && (
<Button title='Back' onPress={() => setStep((s) => s - 1)} />
)}
{step < TOTAL_STEPS ? (
<Button
title={isValidating ? 'Checking...' : 'Next'}
onPress={handleNext}
disabled={isValidating}
/>
) : (
<Button title='Submit' onPress={form.handleSubmit(onFinalSubmit)} />
)}
</View>
);
}Syötettyjen tietojen tarkistaminen viimeisessä vaiheessa
Viimeinen vaihe on usein tarkistusnäkymä, jossa käyttäjä vahvistaa tietonsa ennen lähettämistä. Lukekaa kaikki kenttien arvot form.getValues()-kutsulla ja näyttäkää ne yhteenvetoluettelossa. Näin käyttäjä saa vielä yhden mahdollisuuden huomata kirjoitusvirheet ennen tietojen lähettämistä palvelimelle, mikä vähentää tukipyyntöjä ja käyttäjän tekemiä virheitä.
function Step3Review({ form, onSubmit }: StepProps) {
const values = form.getValues();
return (
<ScrollView>
<Text>Review your information:</Text>
<Text>Name: {values.name}</Text>
<Text>Email: {values.email}</Text>
<Text>Phone: {values.phone}</Text>
<Text>City: {values.city}</Text>
<Button title='Confirm and Register' onPress={onSubmit} />
</ScrollView>
);
}formState.isSubmitting-arvon käyttäminen
formState.isSubmitting on true, kun handleSubmit-funktion asynkroninen callback on käynnissä. Käyttäkää sitä lähetyspainikkeen poistamiseen käytöstä ja latausilmaisimen näyttämiseen API-kutsun aikana. Näin estätte kaksoislähetykset, jos käyttäjä napauttaa painiketta nopeasti, ja annatte selkeän palautteen lomakkeen käsittelystä.
const { formState: { isSubmitting } } = form;
<Button
title={isSubmitting ? 'Submitting...' : 'Confirm and Register'}
onPress={form.handleSubmit(onFinalSubmit)}
disabled={isSubmitting}
/>Vaihetietojen säilyttäminen navigoinnin aikana
Jos käyttäjä siirtyy pois monivaiheisesta lomakkeesta ja palaa myöhemmin, säilyttäkää nykyinen vaihe ja osittain täytetyt lomaketiedot Zustandin tai React Navigationin route-parametrien avulla. Yhdistäkää tämä react-hook-formin reset(savedValues)-kutsuun palauttaaksesi lomakkeen siihen tilaan, johon käyttäjä jäi. Tämä vähentää huomattavasti lomakkeen täyttämisen keskeyttämistä mobiilissa.
// On unmount or navigation away:
useEffect(() => {
return () => {
const currentValues = form.getValues();
useFormDraftStore.getState().saveDraft(currentValues, step);
};
}, []);
// On mount, restore if draft exists:
useEffect(() => {
const draft = useFormDraftStore.getState().draft;
if (draft) {
form.reset(draft.values);
setStep(draft.step);
}
}, []);Kenttien välillä siirtyminen näppäimistöllä
Mobiilissa näppäimistön Next-painikkeen pitäisi siirtää kohdistus seuraavaan syötekenttään saman vaiheen sisällä. Käyttäkää useRef-funktiota kunkin TextInput-komponentin ref-viitteiden säilyttämiseen ja kutsukaa ref.current.focus()-funktiota kunkin syötteen onSubmitEditing-callbackissa. Asettakaa välivaiheen kentille returnKeyType='next' ja kunkin vaiheen viimeiselle kentälle 'done'.
const emailRef = React.useRef<TextInput>(null);
const passwordRef = React.useRef<TextInput>(null);
<TextInput
placeholder='Full Name'
returnKeyType='next'
onSubmitEditing={() => emailRef.current?.focus()}
/>
<TextInput
ref={emailRef}
placeholder='Email'
returnKeyType='next'
onSubmitEditing={() => passwordRef.current?.focus()}
/>
<TextInput
ref={passwordRef}
placeholder='Password'
returnKeyType='done'
onSubmitEditing={handleNext}
secureTextEntry
/>Takaisin navigoinnin turvallinen käsittely
Kun käyttäjä painaa Androidin laitteiston takaisin-painiketta tai pyyhkäisee takaisin iOS:ssä, käsitelkää tapahtuma niin, että vaiheiden laskuria pienennetään koko näytöstä poistumisen sijaan. Käyttäkää useFocusEffect-funktiota ja BackHandler-käsittelijää laitteiston takaisin-tapahtuman sieppaamiseen. Jos käyttäjä on vaiheessa 1, sallikaa normaali navigointi edelliseen näyttöön.
import { BackHandler } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';
useFocusEffect(
React.useCallback(() => {
const handler = BackHandler.addEventListener('hardwareBackPress', () => {
if (step > 1) {
setStep((s) => s - 1);
return true; // prevent default back navigation
}
return false; // allow default (exit screen)
});
return () => handler.remove();
}, [step])
);Pikatarkistus
Testatkaa, miten hyvin ymmärrätte tämän oppitunnin React Native Mobile Development -käsitteet.
Oppitunnin yhteenveto
Tässä oppitunnissa opitte, että kaikkien vaiheiden yhteinen yksi useForm-instanssi pitää lomaketiedot ja validointitilan yhtenäisinä, trigger tietyillä kenttänimillä validoi vain nykyisen vaiheen ennen siirtymistä eteenpäin, ja formState.isSubmitting poistaa lähetyspainikkeen käytöstä viimeisen API-kutsun aikana kaksoislähetysten estämiseksi. Seuraavaksi perehdymme lomakkeiden lähettämiseen ja nollaamiseen.
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 ”Monivaiheiset lomakkeet lomakkeen tilan avulla” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “Monivaiheiset lomakkeet lomakkeen tilan avulla”. 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 ”Monivaiheiset lomakkeet lomakkeen tilan avulla”?
Jakakaa pitkä rekisteröitymislomake useaan vaiheeseen tilassa olevan vaihelaskurin avulla ja validoikaa vain nykyisen vaiheen kentät ennen seuraavaan siirtymistä. 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 3/4.
Kuinka kauan ”Monivaiheiset lomakkeet lomakkeen tilan avulla”-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