Form kütüphaneleri
- React Native kursu
- Orta seviye
- Ders 34/116
- 5 dk
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.
Başlangıç kodu
// useForm'i react-hook-form'dan içe aktar
function SimpleForm() {
// useForm hook'unu çağır
// onSubmit fonksiyonu: veriyi logla
return <></>;
}Örnek çözüm
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.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useForm'dan handleSubmit'i al
const { ____ } = useForm();const { handleSubmit } = useForm();Açıklama: handleSubmit useForm'dan alınır.
2 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
useForm |
Form hook'u |
handleSubmit |
Doğrula ve gönder |
Controller |
TextInput'ı sarar |
register |
Alanı kaydeder |
3 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 Doğru cevap
- Yalnızca web içindir
- useState yerine geçmez
Açıklama: react-hook-form doğrulama ve göndermeyi bildiksel yönetir.