İstatistik widget'ı

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.

Örnek çözümü göster

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;

Kendini test et

Modal'ı kapatmak için ne yapmalı?
- BrowserRouter'i sıfırla
- Route'u sil
- useEffect'i temizle
- isOpen state'ini false yap
Cevabı göster

isOpen state'ini false yap — isOpen state'ini false yapınca modal kapanır.

Form gönderimini engelle

function handleSubmit(e) {
  e.____();
  onAdd(value);
  setIsOpen(false);
}

Cevabı göster

function handleSubmit(e) {
  e.preventDefault();
  onAdd(value);
  setIsOpen(false);
}

İstatistik widget'ı: kavramları eşleştir

isOpen

Modal durumu
onAdd

Ekleme çağrısı
preventDefault

Yenilemeyi engeller
useState

Input değeri

Sıradaki ders: Modal ile ekleme

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler