DOM erişimi

ref ile bir DOM düğümüne erişmeyi öğrenirsin.

DOM erişimi

useRef'in en sık kullanımı bir DOM öğesine doğrudan erişmektir. const inputRef = useRef(null); ile bir ref oluşturur, sonra <input ref={ '{ inputRef }' } /> ile öğeye bağlarsın.

Bağlama sayesinde inputRef.current gerçek DOM öğesine işaret eder. Böylece inputRef.current.focus() ile programlı olarak odaklama yapabilir, inputRef.current.value ile değeri okuyabilirsin.

React genellikle DOM'a doğrudan dokunmayı önermez ama bazı durumlarda kaçınılmazdır: otomatik odaklama, ölçüm alma (getBoundingClientRect), canvas ya da video denetimi, üçüncü partı kütüphane entegrasyonu.

İlk değer null

DOM bağlamada ref'in ilk değeri genellikle null olur: useRef(null). Bu, bağlanmadan önce current'in hiçbir öğeye işaret etmemesi içindir.

İlk render'da React, ref'i bağlar ve current gerçek DOM öğesine işaret eder. Bileşen kaldırıldığında React tekrar null'a döndürür.

Bu yüzden inputRef.current.focus() çağrısı bir useEffect içine ya da bir olay işleyiciye konur; ilk render sırasında doğrudan çağrı yapmazsın.

Uygulama Otomatik odaklama

Aşağıdaki iskeleti tamamla. SearchBox bileşeni yaz. inputRef = useRef(null) ile bir ref oluştur. useEffect içinde inputRef.current.focus() çağır. <input ref={ '{ inputRef }' } placeholder="Ara" /> göster. Dışa aktar.

Örnek çözümü göster

import { useRef, useEffect } from "react";

function SearchBox() {
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  return <input ref={inputRef} placeholder="Ara" />;
}

export default SearchBox;

Kendini test et

DOM bağlama

DOM öğesine ref bağlamak için ____ özniteliği kullanılır.

Cevabı göster

DOM öğesine ref bağlamak için ref özniteliği kullanılır.

Hangi işlem için useRef gerekir?
- Bir diziyi sıralama
- CSS değiştirme
- Bir değeri state'e koyma
- input'a programlı odaklama
Cevabı göster

input'a programlı odaklama — Programlı odaklama için useRef kullanılır.
DOM ref adımlarını eşleştir

useRef(null)

İlk değer
ref={inputRef}

Bağlama
current.focus()

Odalama
useEffect

Yan etki

Sıradaki ders: Zamanlayıcı örneği

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler