React Native
Form kütüphaneleri
react-hook-form gibi form kütüphanelerini öğrenirsin.
react-hook-form
react-hook-form, formları yönetmek için popüler bir kütüphanedir. Manuel useState ve onChangeText yazmak yerine useForm hook'u ile form oluşturursun. Bu kütüphane performanslıdır; her tuş vuruşunda tüm bileşenin yeniden render edilmesini engeller.
Temel kullanım: const { register, handleSubmit, errors } = useForm();. register bir alanı form sistemine kaydeder. handleSubmit doğrulamadan geçerse veriyi alıp işleyicini çağırır. errors doğrulama hatalarını taşır. React Native'de register yerine Controller bileşeni kullanmak yaygındır; çünkü TextInput standart bir HTML girdisi değildir. Bu kütüphane, formları tek tip yönetmenin yanında doğrulama koşullarını bildiksel (declarative) biçimde yazma imkânı verir.
Uygulama useForm ile form yaz
Bir SimpleForm bileşeni yaz. useForm'u react-hook-form'dan içe aktar. const { register, handleSubmit } = useForm(); ile hook'u çağır. onSubmit fonksiyonu console.log(data) yapsın. Bir input ve bir Button döndür; butona onPress={handleSubmit(onSubmit)} ver.
Örnek çözümü göster
import { useForm } from "react-hook-form";
import { Button, TextInput } from "react-native";
function SimpleForm() {
const { register, handleSubmit } = useForm();
function onSubmit(data) {
console.log(data);
}
return (
<>
<TextInput placeholder="Ad" {...register("name")} />
<Button onPress={handleSubmit(onSubmit)} title="Gönder" />
</>
);
}
Controller ile TextInput
React Native'de TextInput standart bir HTML girdisi olmadığı için register doğrudan çalışmaz. Bunun yerine Controller bileşeni kullanırsın. Controller alanı sarar ve değişiklikleri form sistemine bildirir.
Örnek: <Controller control={control} name="email" defaultValue="" render={({ field: { onChange, value } }) => (<TextInput value={value} onChangeText={onChange} />)} />. Burada control useForm'dan alınır; name alan adıdır; render işlevi gerçek girdiyi çizer. field.onChange ile her değişiklik form sistemine iletilir. Bu yaklaşım, TextInput gibi özel girdileri react-hook-form ile uyumlu hale getirir. Doğrulama koşulları da Controller üzerine rules={{ required: true }} şeklinde yazılır.
Kendini test et
-
useForm'dan handleSubmit'i al
const { ____ } = useForm();
Cevabı göster
const { handleSubmit } = useForm();
-
Kavramı rolüne eşle
- useForm
- Form hook'u
- handleSubmit
- Doğrula ve gönder
- Controller
- TextInput'ı sarar
- register
- Alanı kaydeder
-
react-hook-form neden tercih edilir?
const { handleSubmit } = useForm();
- Her tuş vuruşunda tüm bileşeni render eder
- Doğrulama ve göndermeyi bildiksel yönetir
- Yalnızca web içindir
- useState yerine geçmez
Cevabı göster
Doğrulama ve göndermeyi bildiksel yönetir — react-hook-form doğrulama ve göndermeyi bildiksel yönetir.
Sıradaki ders: Özet - Form yönetimi
