Borang Berbilang Langkah dengan Keadaan Borang
Bahagikan borang pendaftaran yang panjang kepada beberapa langkah menggunakan pembilang langkah dalam keadaan, dan sahkan hanya medan langkah semasa sebelum beralih ke langkah seterusnya.
Borang Berbilang Langkah dengan Keadaan Borang ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Native Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.
Apakah Borang Berbilang Langkah?
Borang berbilang langkah memecahkan aliran pendaftaran atau pembayaran yang panjang kepada langkah-langkah berasingan yang mudah diurus — lazimnya 2 hingga 5 skrin. Setiap langkah menumpukan pada kumpulan medan yang berkaitan, sekali gus mengurangkan beban kognitif dan meningkatkan kadar penyelesaian berbanding satu skrin tatal yang panjang. Contoh biasa termasuk panduan permulaan, aliran pembayaran yang menggabungkan alamat dan bayaran, serta penyediaan profil secara berperingkat.
Berkongsi Satu Tika Borang Merentas Langkah
Kunci kepada borang berbilang langkah dengan react-hook-form ialah mencipta satu tika useForm untuk keseluruhan borang dan menghantar control serta errors sebagai props kepada setiap komponen langkah. Ini memastikan semua nilai medan dan keadaan pengesahan disimpan di satu tempat. Nilai yang dimasukkan pada langkah 1 kekal tersedia apabila pengguna sampai ke langkah 3, dan penghantaran langkah terakhir boleh mengakses data borang yang lengkap.
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>
);
}Mentakrifkan Props Komponen Langkah
Setiap komponen langkah menerima tika borang sebagai prop. Takrifkan jenis TypeScript untuk prop tersebut menggunakan UseFormReturn daripada react-hook-form. Ini memberikan komponen langkah akses kepada control, formState.errors, trigger dan watch — semua alat yang diperlukan untuk memaparkan dan mengesahkan subset medannya sendiri.
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
}Mengesahkan Hanya Langkah Semasa
Sebelum beralih ke langkah seterusnya, sahkan hanya medan pada langkah semasa menggunakan form.trigger(['fieldA', 'fieldB']). Tindakan ini menjalankan pengesahan pada medan yang ditentukan dan mengembalikan Promise yang diselesaikan kepada true jika semuanya sah. Jika ada yang gagal, error dipaparkan dan pengguna tidak boleh bergerak ke hadapan sehingga error tersebut dibetulkan. Medan pada langkah seterusnya belum disahkan.
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
}Antara Muka Penunjuk Kemajuan
Tambahkan bar kemajuan visual atau penunjuk langkah di bahagian atas skrin supaya pengguna mengetahui kemajuan mereka. Kira kemajuan sebagai (currentStep / totalSteps) * 100. Bar kemajuan ringkas yang menggunakan lebar View beranimasi memberikan maklum balas yang jelas dan menetapkan jangkaan tentang jumlah yang masih diperlukan sebelum borang dapat dilengkapkan.
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} />Bergerak antara Langkah
Gunakan pembilang langkah dalam useState untuk menjejak langkah semasa. Butang 'Seterusnya' mengesahkan medan langkah semasa dengan trigger sebelum menambah nilai langkah. Butang 'Kembali' mengurangkan nilai langkah tanpa mengesahkan semula. Sentiasa nyahdayakan butang 'Seterusnya' atau paparkan pemuat semasa pengesahan tak segerak (seperti semakan ketersediaan nama pengguna) sedang dijalankan.
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>
);
}Menyemak Data yang Dimasukkan pada Langkah Terakhir
Langkah terakhir selalunya merupakan skrin semakan tempat pengguna mengesahkan input mereka sebelum menghantar. Gunakan form.getValues() untuk membaca semua nilai medan dan memaparkannya dalam senarai ringkasan. Ini memberikan pengguna peluang terakhir untuk membetulkan kesilapan taip sebelum data dihantar ke pelayan, sekali gus mengurangkan pertanyaan sokongan dan error pengguna.
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>
);
}Menggunakan formState.isSubmitting
formState.isSubmitting bernilai true semasa panggilan balik tak segerak milik handleSubmit sedang dijalankan. Gunakannya untuk menyahdayakan butang hantar dan memaparkan pemuat semasa panggilan API. Ini menghalang penghantaran berganda apabila pengguna mengetik dengan pantas dan memberikan maklum balas jelas bahawa borang sedang diproses.
const { formState: { isSubmitting } } = form;
<Button
title={isSubmitting ? 'Submitting...' : 'Confirm and Register'}
onPress={form.handleSubmit(onFinalSubmit)}
disabled={isSubmitting}
/>Mengekalkan Data Langkah Merentas Navigasi
Jika pengguna meninggalkan borang berbilang langkah dan kembali kemudian, gunakan Zustand atau parameter laluan React Navigation untuk mengekalkan langkah semasa dan data borang yang diisi sebahagian. Gabungkan kaedah ini dengan reset(savedValues) milik react-hook-form untuk memulihkan borang kepada keadaan terakhir pengguna. Ini mengurangkan kadar pengguna meninggalkan borang dengan ketara pada peranti mudah alih.
// 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);
}
}, []);Navigasi Papan Kekunci antara Medan
Pada peranti mudah alih, mengetik 'Seterusnya' pada papan kekunci sepatutnya memindahkan fokus ke input seterusnya dalam sesuatu langkah. Gunakan useRef untuk menyimpan ref bagi setiap TextInput dan panggil ref.current.focus() dalam panggilan balik onSubmitEditing bagi setiap input. Tetapkan returnKeyType='next' pada medan perantaraan dan 'done' pada medan terakhir setiap langkah.
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
/>Mengendalikan Navigasi Kembali dengan Selamat
Apabila pengguna menekan butang kembali perkakasan pada Android atau meleret kembali pada iOS, kendalikannya supaya pembilang langkah berkurang dan bukannya meninggalkan skrin sepenuhnya. Gunakan useFocusEffect bersama BackHandler untuk memintas peristiwa kembali perkakasan. Jika pengguna berada pada langkah 1, benarkan navigasi biasa kembali ke skrin sebelumnya.
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])
);Semakan Pantas
Uji pemahaman anda tentang konsep Pembangunan Mudah Alih React Native daripada pelajaran ini.
Ulang Kaji Pelajaran
Dalam pelajaran ini, anda telah mempelajari bahawa satu tika useForm yang dikongsi merentas semua langkah mengekalkan data borang dan keadaan pengesahan secara bersatu, trigger dengan nama medan tertentu hanya mengesahkan langkah semasa sebelum bergerak ke hadapan, dan formState.isSubmitting menyahdayakan butang hantar semasa panggilan API terakhir untuk menghalang penghantaran pendua. Seterusnya, kita akan meneroka penghantaran dan penetapan semula borang.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Borang Berbilang Langkah dengan Keadaan Borang” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “Borang Berbilang Langkah dengan Keadaan Borang”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Borang Berbilang Langkah dengan Keadaan Borang”?
Bahagikan borang pendaftaran yang panjang kepada beberapa langkah menggunakan pembilang langkah dalam keadaan, dan sahkan hanya medan langkah semasa sebelum beralih ke langkah seterusnya. Anda berlatih React Native Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan React Native Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran React Native Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Borang Berbilang Langkah dengan Keadaan Borang” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Native Academy ini?
Ya. Setiap pelajaran React Native Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Menyediakan react-hook-form dengan Controller
- Peraturan Pengesahan dan Mesej Ralat
- Borang Berbilang Langkah dengan Keadaan Borang
- Menghantar dan Menetapkan Semula Borang