Submit

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.

Örnek çözümü göster

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" />
    </>
  );
}

Kendini test et

React Native'de form gönderme hangi prop ile yapılır?
```
<Button onPress={handleSubmit} title="Gönder" />
```
- onPress
- onClick
- onSubmitForm
- onSubmit
Cevabı göster

onPress — React Native'de butona basma onPress ile yakalanır.

Butona gönderme işleyicisini bağla

<Button onPress={____} title="Gönder" />

Cevabı göster

<Button onPress={handleSubmit} title="Gönder" />

Kavramı rolüne eşle

handleSubmit

Gönderme işleyicisi
onPress

Butona bağlar
return

Erken çıkış
validate

Kural kontrolü

Sıradaki ders: Form kütüphaneleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler