Özet - TextInput
- React Native kursu
- Başlangıç
- Ders 29/116
- 5 dk
onChangeText, controlled ve placeholder'ı birleştirerek bir form alanı yazarsın.
Özet - TextInput
Bu grupta TextInput'un temellerini öğrendik: içe aktarma, onChangeText, controlled input, placeholder ve secureTextEntry. Şimdi tüm bunları bir araya getiren bir giriş formu yazacağız.
Hedef: e-posta ve şifre alanlarını yan yana kurmak. E-posta alanında placeholder ile ipucu, şifre alanında secureTextEntry ile maskeleme olacak. Her ikisi de controlled olacak; value ve onChangeText ayrı state'lere bağlanacak. Önce bu formu, ardından da iki alanlı bir kayıt formu yazacaksın.
Uygulama Giriş formu
useState'i react'ten ve TextInput'u react-native'den içe aktar. email ve password state'leri oluştur (ilk değerleri boş dize). İki <TextInput> ekle: ilki placeholder="E-posta" ile controlled; ikincisi placeholder="Şifre" ile controlled ve secureTextEntry içeren.
Başlangıç kodu
// useState ve TextInput'u içe aktar
// email ve password state'leri oluştur
function App() {
return null;
}Örnek çözüm
import { useState } from "react";
import { TextInput, View } from "react-native";
function App() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
return (
<View>
<TextInput placeholder="E-posta" value={email} onChangeText={setEmail} />
<TextInput placeholder="Şifre" value={password} onChangeText={setPassword} secureTextEntry />
</View>
);
}Uygulama Kayıt formu
useState'i react'ten ve TextInput'u react-native'den içe aktar. name ve phone state'leri oluştur (ilk değerleri boş dize). İki controlled <TextInput> ekle: birine placeholder="Ad Soyad", diğerine placeholder="Telefon" ver.
Başlangıç kodu
// useState ve TextInput'u içe aktar
// name ve phone state'leri oluştur
function App() {
return null;
}Örnek çözüm
import { useState } from "react";
import { TextInput, View } from "react-native";
function App() {
const [name, setName] = useState("");
const [phone, setPhone] = useState("");
return (
<View>
<TextInput placeholder="Ad Soyad" value={name} onChangeText={setName} />
<TextInput placeholder="Telefon" value={phone} onChangeText={setPhone} />
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Özet parçalarını eşle
| Kavram | Anlamı |
|---|---|
TextInput |
Metin girişi |
onChangeText |
Değişim işlevi |
value |
Controlled değer |
placeholder |
Boşken ipucu |
secureTextEntry |
Şifre gizleme |
2 Controlled input için hangi ikili gerekir?
<TextInput ? ? />- style ve onPress
- title ve onPress
- placeholder ve color
- value ve onChangeText Doğru cevap
Açıklama: value ve onChangeText controlled deseni oluşturur.