Controlled form

Controlled form bileşenini öğrenirsin.

Kontrollü form nedir?

Kontrollü bileşen (controlled component), değeri React state tarafından yönetilen girdidir. React Native'de bir TextInput kontrollü olduğu zaman value prop'u state'ten gelir ve her tuşa basışta onChangeText ile state güncellenir.

Örnek: const [name, setName] = useState(""); ile state açarsın; sonra <TextInput value={name} onChangeText={setName} /> yazarsın. Böylece girdi her zaman React'in bildiği değerdedir; girdiyi okumak istediğinde name'e bakman yeter. Bu yaklaşım, form verisini tek doğru kaynakta tutar; doğrulama ve gönderme işlemlerini kolaylaştırır. Kontrolsüz girdiler ise kendi iç durumlarını taşır ve React ile senkronizasyonu zordur.

value ve onChangeText

Kontrollü bir TextInput iki prop alır. value prop'u girdinin gösterdiği metindir; bunu state'ten verirsin. onChangeText prop'u ise metin değiştiğinde çağrılır; burada setName gibi setter'ı çağırırsın.

Her tuşa basışta şu akış olur: kullanıcı bir harf yazar → React Native onChangeText'i yeni metinle çağırır → sen setName'i çağırınca state güncellenir → bileşen yeniden render edilir → value yeni state'i gösterir. Bu döngü girdinin her zaman React ile senkron kalmasını sağlar. Eğer value verirsen ama onChangeText vermezsen girdi değişmez; kullanıcı yazamaz. Eğer onChangeText verirsen ama value vermezsen girdi yine çalışır ama kontrol sende değildir.

Uygulama Kontrollü TextInput yaz

Bir NameForm bileşeni yaz. useState ile name state'ini boş dize olarak başlat. Dönüşte <TextInput value={name} onChangeText={setName} placeholder="Ad" /> kullan.

Örnek çözümü göster

import { useState } from "react";
import { TextInput } from "react-native";

function NameForm() {
  const [name, setName] = useState("");
  return (
    <TextInput
      value={name}
      onChangeText={setName}
      placeholder="Ad"
    />
  );
}

Kendini test et

Kontrollü TextInput nasıl yazılır?
```
const [name, setName] = useState("");
```
- <TextInput value={name} />
- <TextInput value={name} onChangeText={setName} />
- <TextInput onChangeText={setName} />
- <TextInput defaultValue={name} />
Cevabı göster

<TextInput value={name} onChangeText={setName} /> — value ve onChangeText birlikte kontrollü girdiyi oluşturur.

value prop'unu yaz

<TextInput ____={name} onChangeText={setName} placeholder="Ad" />

Cevabı göster

<TextInput value={name} onChangeText={setName} placeholder="Ad" />

Prop'u rolüne eşle

value

Gösterilen metin
onChangeText

Metin değişince çağrılır
useState

State açar
setName

State'i günceller

Sıradaki ders: Form state

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler