İstatistik widget'ı
- React kursu
- Orta seviye
- Ders 75/80
- 5 dk
useMemo ile pahalı istatistik hesabı yapan bir widget yazarsın.
Modal deseni
Bu derste yeni istatistik eklemek için bir modal açacağız. Modal, isOpen state'i ile açılıp kapanır; <dialog> veya özel bir kap olarak basılır.
Form gönderildiğinde onAdd(value) çağrılır, modal kapanır. Bu kalıp, ekleme formlarını yönetiminin standart yoludur.
Bu dersin başlangıç kodunda önceki dersin StatCard ve StatsPage çözümü var.
Form gönderimi
Modal içinde bir <form onSubmit={handleSubmit}> olur. handleSubmit e.preventDefault() yapar, input değerini okur, onAdd(value) çağırır ve modal'ı kapatır.
React'te form gönderiminde varsayılan davranış sayfayı yeniler; bunu preventDefault ile engellersin. Controlled input için useState kullanılır.
Bu yapı, ekleme formlarının temelidir ve projelerde sık görülür.
Uygulama AddStatModal bileşeni
AddStatModal bileşeni yaz: { isOpen, onAdd, onClose } proplarını destructure et. Eğer !isOpen ise null döndür. İçinde <div> ve <form onSubmit={handleSubmit}> olsun. handleSubmit e.preventDefault() yapsın, inputRef.current.value'yi alıp onAdd(value) çağırsın ve onClose() yapsın. export default AddStatModal.
Başlangıç kodu
import { useRef } from "react";
// AddStatModal bileşenini buraya yazÖrnek çözüm
import { useRef } from "react";
function AddStatModal({ isOpen, onAdd, onClose }) {
const inputRef = useRef(null);
if (!isOpen) return null;
function handleSubmit(e) {
e.preventDefault();
const value = inputRef.current.value;
onAdd(value);
onClose();
}
return (
<div>
<form onSubmit={handleSubmit}>
<input ref={inputRef} />
<button type="submit">Ekle</button>
</form>
</div>
);
}
export default AddStatModal;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Modal'ı kapatmak için ne yapmalı?
- BrowserRouter'i sıfırla
- Route'u sil
- useEffect'i temizle
- isOpen state'ini false yap Doğru cevap
Açıklama: isOpen state'ini false yapınca modal kapanır.
2 Form gönderimini engelle
function handleSubmit(e) {
e.____();
onAdd(value);
setIsOpen(false);
}function handleSubmit(e) {
e.preventDefault();
onAdd(value);
setIsOpen(false);
}Açıklama: e.preventDefault() sayfa yenilenmesini engeller.
3 İstatistik widget'ı: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
isOpen |
Modal durumu |
onAdd |
Ekleme çağrısı |
preventDefault |
Yenilemeyi engeller |
useState |
Input değeri |