Submit
- React Native kursu
- Orta seviye
- Ders 33/116
- 5 dk
Form submit ve onSubmit öğrenirsin.
Form gönderme
Bir form, kullanıcı veriyi girdikten sonra gönderilir. React Native'de gönderme genelde bir Button'un onPress'ine bağlanır. Gönderme işleyicisinde doğrulama yapar, hata yoksa veriyi işlersin.
Örnek: function handleSubmit() { if (!validate()) return; sendToServer(form); }. Burada validate yanlış dönerse erken return ile çıkılır ve gönderme durur. Doğrulama geçerse sendToServer gibi bir fonksiyonla veri gönderilir. onPress={handleSubmit} ile butona bağlanır. Web'deki onSubmit olayı React Native'de yoktur; bunun yerine onPress kullanılır. Gönderme sırasında butonu devre dışı bırakarak çift gönderimi önlemek de yaygındır.
Erken return ile doğrulama
Gönderme işleyicisinin ilk satırı genelde doğrulamadır. Doğrulama geçmezse return ile erken çıkılır. Bu, gönderme işleminin geri kalanının çalışmasını engeller.
Örnek: function handleSubmit() { if (!form.email.includes("@")) { setErrors({ email: "Geçersiz" }); return; } console.log(form); }. Burada e-posta geçersizse hata ayarlanır ve fonksiyondan çıkılır; console.log çalışmaz. Bu desen kodu okunabilir kılar; derin iç içe if blokları yerine düz bir akış olur. Birden çok kontrolü art arda yapabilirsin; her biri başarısız olursa erken çıkılır. Bu desene guard clause denir. Erken return, fonksiyonun amacını netleştirir.
Uygulama Form gönderme ekle
Bir SignupForm bileşeni yaz. useState ile email state'ini başlat. handleSubmit fonksiyonu yaz: email.includes("@") değilse return ile çık. Geçerse console.log(email) yap. Butona onPress={handleSubmit} ile bağla.
Başlangıç kodu
// useState ve Button, TextInput'u içe aktar
function SignupForm() {
// email state'ini başlat (boş dize)
// handleSubmit fonksiyonu: e-posta kontrolü, geçerse log yaz
return null;
}Örnek çözüm
import { useState } from "react";
import { Button, TextInput } from "react-native";
function SignupForm() {
const [email, setEmail] = useState("");
function handleSubmit() {
if (!email.includes("@")) return;
console.log(email);
}
return (
<>
<TextInput
value={email}
onChangeText={setEmail}
placeholder="E-posta"
/>
<Button onPress={handleSubmit} title="Gönder" />
</>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 React Native'de form gönderme hangi prop ile yapılır?
<Button onPress={handleSubmit} title="Gönder" />- onPress Doğru cevap
- onClick
- onSubmitForm
- onSubmit
Açıklama: React Native'de butona basma onPress ile yakalanır.
2 Butona gönderme işleyicisini bağla
<Button onPress={____} title="Gönder" /><Button onPress={handleSubmit} title="Gönder" />Açıklama: onPress={handleSubmit} ile butona bağlanır.
3 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
handleSubmit |
Gönderme işleyicisi |
onPress |
Butona bağlar |
return |
Erken çıkış |
validate |
Kural kontrolü |