Özet - Formlar

İsimalanı girişi olan kısa bir iletişim formu yazarsın.

Özet - Formlar

Bu grupta React formlarını öğrendin. Kontrollü input, value'su state'e bağlıdır; onChange her tuşta state'i günceller. Tek doğru kaynak state'tir.

Form gönderiminde onSubmit ve e.preventDefault() kullanılır. Birden çok alan tek nesne state + spread ile yönetilir.

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

Uygulama Form özet görevi

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

Örnek çözümü göster

import { useState } from "react";

function SearchForm() {
  const [q, setQ] = useState("");
  function handleSubmit(e) { e.preventDefault(); }
  return <form onSubmit={handleSubmit}><input value={q} onChange={e => setQ(e.target.value)} /><button type="submit">Ara</button></form>;
}

export default SearchForm;

Kendini test et

Aşağıdakilerden hangisi yanlış?
```
preventDefault stops the reload.
```
- value state'e bağlıdır
- submit'te preventDefault gerekmez
- nesne state spread ile güncellenir
- onChange her tuşta çalışır
Cevabı göster

submit'te preventDefault gerekmez — preventDefault her zaman gerekir; yoksa sayfa yenilenir.
Özet - Formlar: kavramları eşleştir

value

State kaynağı
onChange

Değişim
onSubmit

Gönderim
preventDefault

Yenilemeyi engelle

Sıradaki ders: CSS ile stil

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler