React Native'de formları ve kullanıcı girdisini nasıl yönetirsiniz?

Question

Accepted Answer

Çoğu uygulamada **formlar** (giriş, kayıt, veri girişi) **TextInput** kullanılarak ve giriş durumu yönetilerek yer alır. React Native formları kontrol edilen bileşenler, durum ve sıklıkla kütüphaneler (Formik, React Hook Form) ile yönetir; kompleks formlar için doğrulama gerekir.

## TextInput ve kontrol edilen girdiler

```jsx
import { TextInput } from 'react-native';
import { useState } from 'react';

function LoginForm() {
  const [email, setEmail] = useState('');     // input state
  return (
    <TextInput
      value={email}                            // controlled: value from state
      onChangeText={setEmail}                  // update state on change
      placeholder="Email"
      keyboardType="email-address"             // appropriate keyboard
      autoCapitalize="none"
    />
  );
}
```

Bir **kontrol edilen giriş**, TextInput'un değerini duruma bağlar (`value` + `onChangeText`) — durum, giriş için gerçek kaynaktır. `keyboardType` doğru klavyeyi gösterir.

## Doğrulama ile formlar (kütüphaneler)

```text
For real forms (multiple fields, validation), libraries reduce boilerplate:
  REACT HOOK FORM → performant, minimal re-renders, popular; handles values + validation
  FORMIK (+ Yup for validation schemas) → another popular form library
→ They manage form state, validation, errors, and submission cleanly.
```

## En iyi uygulamalar

```text
✓ VALIDATE input (required, format, length) → show clear error messages
✓ Use appropriate keyboardType (email, numeric, phone) and input props (secureTextEntry
  for passwords, autoCapitalize, autoComplete)
✓ Handle the keyboard (KeyboardAvoidingView so it doesn't cover inputs)
✓ Provide good UX: loading on submit, disable while submitting, clear feedback
```

## Neden önemli

Formları ve kullanıcı girdisini nasıl yönetileceğini anlamak çok önemlidir çünkü **çoğu uygulamada formlar** vardır (giriş, kayıt, veri girişi, arama) ve bunlar giriş yönetimi ile doğrulama gerektirir; bu nedenle olmazsa olmaz pratik bilgidir.

Formlar uygulamaların neredeyse evrensel bir parçasıdır.

**TextInput ve kontrol edilen girdileri** anlamak — giriş değerini duruma bağlamak (`value` + `onChangeText`, durumu gerçek kaynak yapmak) ve uygun giriş özelliklerini kullanmak (`keyboardType` doğru klavye için, `secureTextEntry` şifreler için, autoCapitalize) — React Native'de giriş yönetimi için temel mekanizmadır.

**Form kütüphaneleri**nin (React Hook Form, Formik with Yup) gerçek formlar (çok sayıda alan, doğrulama) için yardımcı olduğunu anlamak — form durumunu, doğrulamayı, hataları ve gönderimi temiz bir şekilde yöneteyerek — değerlidir, çünkü birçok alanı useState ile elle yönetmek yorucu ve hataya açıktır ve bu kütüphaneler yaygın olarak kullanılır.

**En iyi uygulamaları** anlamak önemlidir: **girdiyi doğrulamak** (zorunlu alanlar, formatlar, uzunluklar, açık hata mesajları ile — veri kalitesi ve kullanıcı deneyimi için temel), uygun klavye türleri ve giriş özelliklerini kullanmak (daha iyi giriş deneyimi için), **klavyeyi yönetmek** (KeyboardAvoidingView böylece klavye girişleri kaplamaz — yaygın bir React Native UX sorunu) ve iyi gönderim deneyimi sağlamak (yükleme durumları, gönderim sırasında devre dışı bırakma) — bunlar parlak, sağlam formlar oluşturmayı yansıtır.

Çoğu uygulamada giriş yönetimi ve doğrulama gerektiren formlar olduğundan (neredeyse evrensel bir ihtiyaç) ve React Native'nin TextInput ile kontrol edilen durum, kompleks durumlar için form kütüphaneleri ve en iyi uygulamalar (doğrulama, klavye yönetimi, iyi UX) bu işleri iyi yapmanın yolu olduğundan, React Native'de formları ve kullanıcı girdisini anlamak temel, sıklıkla uygulanan bilgidir — neredeyse giriş toplayan her gerçek uygulamada gerekli olan temel bir beceridir, hem veri doğruluğu (doğrulama) hem de kullanıcı deneyimi (klavye yönetimi, uygun girdiler) için önemlidir ve işlevsel React Native uygulamaları oluşturmak için temeldir.