Form gönderimi

Form gönderimini yakalayıp veriyi okumayı öğrenirsin.

Form gönderimi

Kontrollü inputları bir form içine alıp onSubmit ile tek seferde işleyebilirsin. Handler, e.preventDefault() ile yenilemeyi durdurur, sonra state'i okur.

Her input ayrı bir state parçasıdır; gönderimde hepsini bir araya getirip işlersin. Bu, çok alanlı formların temelidir.

Submit düğmesi type="submit" olunca formun onSubmit'ini tetikler; Enter da çalışır.

Çok alanlı form

Birden çok alanı ya ayrı useState'lerle ya da tek bir nesne state'le tutarsın. Nesne yaklaşımında spread ile güncellersin.

Örnek: setForm(f => ({...f, name: e.target.value})). Bu, her input için ayrı bir handler yazmaktan kurtarır; tek bir handleChange yeter.

İleride React Hook Form ile bu yükü azaltacağız; şimdilik temel yaklaşımı öğreniyoruz.

Uygulama Gönderimli form

Aşağıdaki iskeleti tamamla. GreetForm bileşeni yaz; useState'i içe aktar. const [name, setName] = useState(""); tanımla. handleSubmit (parametre e) ilk satırda e.preventDefault() çağırır. <form onSubmit={handleSubmit}> içinde <input value={name} onChange={e => setName(e.target.value)} /> ve <button type="submit">Gönder</button> döndür. Dışa aktar.

Örnek çözümü göster

import { useState } from "react";

function GreetForm() {
  const [name, setName] = useState("");
  function handleSubmit(e) { e.preventDefault(); }
  return <form onSubmit={handleSubmit}><input value={name} onChange={e => setName(e.target.value)} /><button type="submit">Gönder</button></form>;
}

export default GreetForm;

Kendini test et

Form gönderiminde ilk iş ne olmalıdır?
```
preventDefault stops the browser reload.
```
- state güncelleme
- fetch çağrısı
- render etme
- e.preventDefault()
Cevabı göster

e.preventDefault() — Önce sayfa yenilenmesi engellenir.

Form gönderimi: eksik parçayı tamamla

function handleSubmit(e) { ____; send(text); }

Cevabı göster

function handleSubmit(e) { e.preventDefault(); send(text); }

Form gönderimi: kavramları eşleştir

onSubmit

Form gönderim
e.preventDefault()

Yenilemeyi engeller
type="submit"

Gönderen düğme
setForm({...f})

Nesne güncelleme

Sıradaki ders: Birden çok alan

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler