React Native
Form olayları
Form gönderimi ve doğrulama olaylarını öğrenirsin.
Form olaylarına giriş
Formlarda en sık kullanılan olay onChangeText'dir. TextInput bileşeni, kullanıcı yazı yazdıkça bu olayı tetikler. Her tuşa basışta yeni metni sana verir.
Örnek: <TextInput onChangeText={'{setText}'}/>. Burada setText, state'in setter'ıdır. Kullanıcı her harf yazdığında state güncellenir ve ekrandaki metin tazelenir.
Form gönderimi için onSubmitEditing olayı vardır. Kullanıcı klavyedeki gönder tuşuna basınca çağrılır. Örnek: onSubmitEditing={'{() => save()}'}. Bu, enter ile form göndermek için idealdir.
Form gönderimi
Form gönderimini yakalamak için onSubmitEditing kullanılır. Kullanıcı klavyedeki gönder tuşuna basınca çağrılır; bu da formu kaydetmek için idealdir.
Örnek: <TextInput onSubmitEditing={'{() => save(text)}'} />. Burada save formu işleyen fonksiyondur. Gönder tuşuna basınca text state'iyle çağrılır.
Doğrulama için state'i kontrol edersin. Örneğin e-posta boşsa hata mesajı göster. Bu tür mantık, gönderim işleyicisinde yapılır; her tuşa basışta değil.
Uygulama Basit giriş formu
Bir App bileşeni yaz. useState('') ile email tanımla. <TextInput> etiketinde value={'{email}'}, onChangeText={'{setEmail}'} ve onSubmitEditing={'{() => console.log(email)}'} olsun. App fonksiyonunu dışa aktar.
Örnek çözümü göster
function App() {
const [email, setEmail] = useState('');
return (
<TextInput
value={email}
onChangeText={setEmail}
onSubmitEditing={() => console.log(email)}
/>
);
}
export default App;
Kendini test et
-
onChangeText ekle
import { TextInput } from 'react-native';
import { useState } from 'react';
function App() {
const [text, setText] = useState('');
return (
<TextInput
____={setText}
value={text}
/>
);
}
Cevabı göster
import { TextInput } from 'react-native';
import { useState } from 'react';
function App() {
const [text, setText] = useState('');
return (
<TextInput
onChangeText={setText}
value={text}
/>
);
}
-
Form olaylarını eşle
- onChangeText
- Her tuşa basışta
- onSubmitEditing
- Gönder tuşunda
- value
- Mevcut metin
- setText
- Metni günceller
-
Her tuşa basışta ne çağrılır?
- onSubmitEditing
- onLayout
- onLongPress
- onChangeText
Cevabı göster
onChangeText — onChangeText her tuşa basışta yeni metni verir.
Sıradaki ders: Özet - Olaylar
