0Pricing
React Academy · Ders

TypeScript'te Olayları ve Ref'leri Türlendirme

DOM etkileşimleri için React.ChangeEvent, React.MouseEvent ve RefObject genel türlerini kullanın.

TypeScript'te Olayları ve Ref'leri Türlendirme, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

React sentetik olayları

React, yerel DOM olaylarını SyntheticEvent içinde sarar. Her olay türünün kendine özgü bir genel türü vardır: React.ChangeEvent<HTMLInputElement>, React.MouseEvent<HTMLButtonElement> ve benzerleri.

onChange'i türlendirme

En yaygın olay, girişlerdeki onChange olayıdır. İşleyicisini React.ChangeEvent<HTMLInputElement> ile türlendirin.

function SearchInput() {
  const [value, setValue] = useState('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  return <input value={value} onChange={handleChange} />;
}

onClick'i türlendirme

Düğme tıklamaları React.MouseEvent<HTMLButtonElement> kullanır. Tam türlendirmeyle e.currentTarget, e.preventDefault() ve e.stopPropagation() değerlerine erişin.

function DeleteButton({ onDelete }: { onDelete: () => void }) {
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation();
    onDelete();
  };
  return <button onClick={handleClick}>Delete</button>;
}

onSubmit'i türlendirme

Form gönderimi React.FormEvent<HTMLFormElement> kullanır. Varsayılan tarayıcı gezinmesini durdurmak için her zaman e.preventDefault() çağırın.

function LoginForm() {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const form = e.currentTarget;
    const email = (form.elements.namedItem('email') as HTMLInputElement).value;
    console.log(email);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input name="email" />
      <button type="submit">Login</button>
    </form>
  );
}

Klavye olaylarını türlendirme

Klavye işleyicilerini türlendirmek için React.KeyboardEvent<HTMLElement> kullanın. e.key, e.code ve e.ctrlKey değerlerine güvenle erişin.

function CommandInput() {
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter' && e.metaKey) {
      submitCommand();
    }
  };
  return <input onKeyDown={handleKeyDown} />;
}

DOM öğeleri için useRef

HTML öğesi türünü useRef için genel tür parametresi olarak verin ve başlangıç değerini null yapın. Böylece TypeScript, başvurunun bu öğe türünü tuttuğunu bilir.

function AutoFocusInput() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} />;
}

Değişebilir başvuru ve DOM başvurusu

Değişebilir bir değer (DOM düğümü değil) depolarken useRef işlevini null yerine bir değerle başlatın. TypeScript böylece değişebilir bir MutableRefObject çıkarır.

// DOM ref (read-only current)
const divRef = useRef<HTMLDivElement>(null);

// Mutable ref (read-write current)
const countRef = useRef<number>(0);
countRef.current += 1; // ✓ no TypeScript error

useImperativeHandle'ı türlendirme

Bir alt bileşenden başvuru API'si sunarken işleyici için bir arayüz tanımlayın ve bunu hem forwardRef hem de useImperativeHandle içinde kullanın.

interface DialogHandle {
  open: () => void;
  close: () => void;
}

const Dialog = forwardRef<DialogHandle, { title: string }>((props, ref) => {
  useImperativeHandle(ref, () => ({
    open: () => console.log('open'),
    close: () => console.log('close'),
  }));
  return <div>{props.title}</div>;
});

Başvuru geri çağırmaları

Bir başvuru geri çağırması DOM öğesini veya null değerini alır. Bunu (node: HTMLElement | null) => void olarak türlendirin.

function MeasureDiv() {
  const [height, setHeight] = useState(0);

  const measuredRef = (node: HTMLDivElement | null) => {
    if (node) setHeight(node.getBoundingClientRect().height);
  };

  return <div ref={measuredRef}>Content: {height}px tall</div>;
}

Olay hedefi ve geçerli hedef

e.target, olayı tetikleyen öğedir; e.currentTarget ise işleyicinin bağlı olduğu öğedir. Belirli özelliklere ihtiyacınız olduğunda e.target değerini dönüştürün.

const handleClick = (e: React.MouseEvent<HTMLUListElement>) => {
  const target = e.target as HTMLLIElement;
  console.log(target.dataset.id);
};

Genel olay işleyicisi türü

Yeniden kullanılabilir olay işleyicisi işlevleri yazmak için genel React.EventHandler<Event> türünü kullanın veya işlev imzasının tamamını satır içinde yazın.

type InputChangeHandler = React.ChangeEventHandler<HTMLInputElement>;

const logChange: InputChangeHandler = (e) => {
  console.log(e.target.value); // e is fully typed
};

Hızlı kontrol

Bir HTMLInputElement tutan useRef için hangi TypeScript türünü kullanmalısınız?

Özet

Olay işleyicilerini React.ChangeEvent, React.MouseEvent ve React.FormEvent genel türleriyle türlendirin. DOM başvurularını useRef<HTMLElement>(null) ile, değişebilir başvuruları ise değer türüyle türlendirin. Buyruklu API'ler için forwardRef işlevini açık bir işleyici arayüzüyle kullanın.

Sıkça Sorulan Sorular

“TypeScript'te Olayları ve Ref'leri Türlendirme” dersi ücretsiz mi?

Evet — “TypeScript'te Olayları ve Ref'leri Türlendirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“TypeScript'te Olayları ve Ref'leri Türlendirme” dersinde ne öğreneceğim?

DOM etkileşimleri için React.ChangeEvent, React.MouseEvent ve RefObject genel türlerini kullanın. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“TypeScript'te Olayları ve Ref'leri Türlendirme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Prop'ları ve Bileşen Dönüş Türlerini Türlendirme
  2. TypeScript'te Olayları ve Ref'leri Türlendirme
  3. Genel Bileşenler ve Yardımcı Türler
  4. Context'leri ve Özel Hook'ları Türlendirme
← React Academy Sayfasına Dön