React Native Academy · درس

إرسال النماذج وإعادة ضبطها

عالجوا إرسال النموذج باستخدام handleSubmit، وأجروا استدعاء API بالقيم التي اجتازت التحقق، واعرضوا رسالة نجاح أو خطأ من الخادم، ثم أعيدوا ضبط النموذج عند النجاح.

إرسال النماذج وإعادة ضبطها درس مجاني في React Native Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Native Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Native Academy 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

The handleSubmit Wrapper

handleSubmit from useForm is a higher-order function that wraps your submit handler. When called, it first runs all validation rules. If every field passes, it calls your handler with the typed form data. If any field fails, it populates formState.errors and does not call your handler. Never read form values directly from state inside the submit handler — always use the typed data argument that handleSubmit provides.

const { handleSubmit } = useForm<LoginForm>();

async function onSubmit(data: LoginForm) {
  // data is fully typed — guaranteed to have passed validation
  console.log(data.email, data.password);
  await authApi.login(data.email, data.password);
}

// Wire to button:
<Button title='Log In' onPress={handleSubmit(onSubmit)} />

Making an API Call in the Submit Handler

The submit handler is an async function — handleSubmit handles the Promise automatically. Make your API call inside a try-catch block. On success, navigate to the next screen or show a success message. On failure, use setError to show a field-level error or display a general error with Alert.

async function onSubmit(data: RegisterForm) {
  try {
    await api.register({
      email: data.email,
      password: data.password,
      name: data.name,
    });
    navigation.replace('Home');
  } catch (err: any) {
    if (err.status === 409) {
      setError('email', { message: 'This email is already in use.' });
    } else {
      Alert.alert('Registration Failed', 'Please try again later.');
    }
  }
}

isSubmitting to Block Double Submissions

formState.isSubmitting is automatically set to true while your async submit handler is running and to false when it completes. Use it to disable the submit button during the API call. Without this guard, fast double-taps can submit the form twice, causing duplicate records on the server or charging a user twice.

const { handleSubmit, formState: { isSubmitting } } = useForm<LoginForm>();

return (
  <View>
    {/* ... form fields ... */}
    <TouchableOpacity
      onPress={handleSubmit(onSubmit)}
      disabled={isSubmitting}
      style={[styles.button, isSubmitting && styles.buttonDisabled]}
    >
      {isSubmitting
        ? <ActivityIndicator color='white' />
        : <Text style={styles.buttonText}>Log In</Text>
      }
    </TouchableOpacity>
  </View>
);

Handling Submission Errors from the Server

When the server returns a general error (not tied to a specific field), display it near the submit button or in an error banner above the form. Use a local serverError state variable that you set in the catch block. This separates server-level errors from field-level validation errors and gives users a clear message about what went wrong.

const [serverError, setServerError] = React.useState<string | null>(null);

async function onSubmit(data: LoginForm) {
  setServerError(null); // clear previous error
  try {
    await api.login(data);
    navigation.replace('Dashboard');
  } catch {
    setServerError('Login failed. Please check your credentials.');
  }
}

// In render:
{serverError && (
  <Text style={styles.serverError}>{serverError}</Text>
)}

Showing a Success State

After a successful submission, provide clear feedback before navigating away. An inline success message, a check-mark animation, or a brief delay before navigation all help users feel confident the action completed. For forms like contact or feedback submission that do not navigate away, reset the form and show a success banner in place of the submit button.

const [submitted, setSubmitted] = React.useState(false);

async function onSubmit(data: FeedbackForm) {
  await api.sendFeedback(data);
  setSubmitted(true);
  reset();
}

if (submitted) {
  return (
    <View style={styles.success}>
      <Ionicons name='checkmark-circle' size={64} color='green' />
      <Text>Thank you! Your feedback was sent.</Text>
    </View>
  );
}

Resetting to Default Values

Call reset() with no arguments to clear all fields back to their defaultValues and also clear all errors. This is useful for 'Send Another' flows where the user wants to submit the same form type multiple times, or for forms that appear in a modal and need to be blank when reopened. The reset is synchronous and immediate.

const { reset } = useForm<ContactForm>({
  defaultValues: { name: '', email: '', message: '' },
});

async function onSubmit(data: ContactForm) {
  await api.sendMessage(data);
  reset(); // all fields cleared, errors cleared
  Alert.alert('Sent!', 'Your message has been delivered.');
}

Resetting to New Values

Pass a value object to reset(newValues) to replace the default values and repopulate the form at the same time. This is the correct way to pre-fill an edit form with data loaded from the server. Call reset inside a useEffect that runs when the server data arrives to populate all fields without triggering field-level validation.

const { reset } = useForm<ProfileForm>();

useEffect(() => {
  if (userProfile) {
    reset({
      name: userProfile.name,
      bio: userProfile.bio,
      website: userProfile.website ?? '',
    });
  }
}, [userProfile, reset]);

Resetting Individual Fields with setValue

Sometimes you only want to reset or update one specific field without clearing the entire form. Use setValue(fieldName, newValue) for targeted updates. An optional third argument { shouldValidate: true } re-runs validation for that field after the value is set, useful when you programmatically change a field and want errors to update immediately.

const { setValue } = useForm<AddressForm>();

async function handleLocationPress() {
  const loc = await Location.getCurrentPositionAsync({});
  const [address] = await Location.reverseGeocodeAsync(loc.coords);
  setValue('city', address.city ?? '', { shouldValidate: true });
  setValue('postalCode', address.postalCode ?? '');
}

isDirty and Unsaved Changes Guard

formState.isDirty is true when any field value differs from its default value. Use this to warn the user before they navigate away from an unsaved form. Hook into navigation's beforeRemove event (React Navigation) to show a 'Discard changes?' alert when the form is dirty and the user tries to go back.

const { formState: { isDirty } } = form;

useEffect(() => {
  const unsubscribe = navigation.addListener('beforeRemove', (e) => {
    if (!isDirty) return;
    e.preventDefault();
    Alert.alert('Discard changes?', 'You have unsaved changes.', [
      { text: 'Keep Editing', style: 'cancel' },
      { text: 'Discard', style: 'destructive',
        onPress: () => navigation.dispatch(e.data.action) },
    ]);
  });
  return unsubscribe;
}, [navigation, isDirty]);

Validating on Demand with trigger

You can call trigger() with no arguments to validate all fields at any time — not just on submit. Call it when the user taps a 'Check' button, when they reach the end of a scrollable form, or to pre-validate before switching tabs. This is useful for showing all errors at once so users can fix everything before hitting the submit button.

const { trigger, formState: { errors } } = useForm<RegisterForm>();

async function handleCheckAll() {
  const isValid = await trigger();
  if (!isValid) {
    Alert.alert('Please fix the highlighted fields before submitting.');
  }
}

Complete Login Form Example

Here is a production-ready login form combining everything from this lesson: typed useForm, Controller-wrapped inputs, validation rules, isSubmitting guard, server error display, and navigation on success. This template can be adapted for any authentication or data entry screen in a React Native app.

export default function LoginScreen() {
  const { control, handleSubmit, formState: { errors, isSubmitting } } = useForm<LoginForm>();
  const [serverError, setServerError] = React.useState<string | null>(null);

  async function onSubmit(data: LoginForm) {
    setServerError(null);
    try {
      await authApi.login(data.email, data.password);
      navigation.replace('Home');
    } catch { setServerError('Invalid credentials.'); }
  }

  return (
    <View style={styles.container}>
      {serverError && <Text style={styles.serverError}>{serverError}</Text>}
      <EmailController control={control} error={errors.email} />
      <PasswordController control={control} error={errors.password} />
      <Button title={isSubmitting ? 'Logging in...' : 'Log In'}
        onPress={handleSubmit(onSubmit)} disabled={isSubmitting} />
    </View>
  );
}

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

In this lesson you learned: handleSubmit validates all fields before calling your async handler and sets isSubmitting automatically, reset() clears the form while reset(newValues) repopulates it for edit scenarios, and isDirty guards against accidental data loss by warning before navigation. Next we begin the B2 courses, starting with Supabase integration in React Native.

الأسئلة الشائعة

هل درس «إرسال النماذج وإعادة ضبطها» مجاني؟

نعم — نص درس «إرسال النماذج وإعادة ضبطها» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Native Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Native Academy 4 دروس في المجموع.

ماذا ستتعلم في «إرسال النماذج وإعادة ضبطها»؟

عالجوا إرسال النموذج باستخدام handleSubmit، وأجروا استدعاء API بالقيم التي اجتازت التحقق، واعرضوا رسالة نجاح أو خطأ من الخادم، ثم أعيدوا ضبط النموذج عند النجاح. تتمرن على React Native Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ React Native Academy؟

لا تُشترط خبرة سابقة. React Native Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «إرسال النماذج وإعادة ضبطها»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس React Native Academy هذا؟

نعم. كل درس في React Native Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

إعداد react-hook-form باستخدام Controller
قواعد التحقق ورسائل الخطأ
النماذج متعددة الخطوات مع حالة النموذج
إرسال النماذج وإعادة ضبطها

← العودة إلى React Native Academy