controlled input

Controlled input ve state öğrenirsin.

Controlled input

React Native'te controlled input, value prop'u bir state'ten gelen ve değişimin yine state'i güncelleyen TextInput'dur. Yani value={name} ile güncel metin state'ten okunur, onChangeText={setName} ile her tuş vuruşu state'e yazılır.

Bu desende veri tek kaynaktan akar: state. Görüntü her zaman state'in yansımasıdır. Bu, doğrulama ve senkronizasyon için tutarlı bir yapı kurar. Bu derste controlled bir TextInput'u nasıl kuracağımızı göreceğiz.

Value ve state akışı

Controlled deseni şöyle kurulur: önce const [name, setName] = useState(""); ile state'i tanımla. Sonra <TextInput value={name} onChangeText={setName} /> ile her iki prop'u da bağla.

Akış: kullanıcı yazınca onChangeText setName'i çağırır, state güncellenir, bileşen yeniden render olur, value={name} güncel metni gösterir. Eğer value prop'unu eklemezsen onChangeText yine çalışır ama alan "uncontrolled" kalır; değer senin elinde tutulmaz.

Uygulama Controlled TextInput kur

useState'i react'ten ve TextInput'u react-native'den içe aktar. name state'i oluştur (ilk değeri boş dize). <TextInput>'u controlled yap: hem value={name} hem onChangeText={setName} prop'ları olsun.

Örnek çözümü göster

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

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

Kendini test et

Controlled input ne demektir?
```
<TextInput value={name} onChangeText={setName} />
```
- Value state'ten gelir
- Yalnızca okunabilir
- State kullanılmaz
- Value sabit kalır
Cevabı göster

Value state'ten gelir — Controlled input'ta value bir state'ten gelir.
Controlled akışı eşle

Kullanıcı yazar

onChangeText tetiklenir
setName

State'i günceller
Re-render

value güncellenir
value={name}

State'ten okur

value prop'u

<TextInput ____={name} onChangeText={setName} />

Cevabı göster

<TextInput value={name} onChangeText={setName} />

Sıradaki ders: placeholder

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler