Form olayları
- React Native kursu
- Başlangıç
- Ders 81/116
- 5 dk
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.
Başlangıç kodu
import { useState } from 'react';
import { TextInput } from 'react-native';
// giriş formunu buraya yazÖrnek çözüm
function App() {
const [email, setEmail] = useState('');
return (
<TextInput
value={email}
onChangeText={setEmail}
onSubmitEditing={() => console.log(email)}
/>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 onChangeText ekle
import { TextInput } from 'react-native';
import { useState } from 'react';
function App() {
const [text, setText] = useState('');
return (
<TextInput
____={setText}
value={text}
/>
);
}import { TextInput } from 'react-native';
import { useState } from 'react';
function App() {
const [text, setText] = useState('');
return (
<TextInput
onChangeText={setText}
value={text}
/>
);
}Açıklama: onChangeText her tuşa basışta çağrılır.
2 Form olaylarını eşle
| Kavram | Anlamı |
|---|---|
onChangeText |
Her tuşa basışta |
onSubmitEditing |
Gönder tuşunda |
value |
Mevcut metin |
setText |
Metni günceller |
3 Her tuşa basışta ne çağrılır?
- onSubmitEditing
- onLayout
- onLongPress
- onChangeText Doğru cevap
Açıklama: onChangeText her tuşa basışta yeni metni verir.