DOM erişimi
- React kursu
- Başlangıç
- Ders 74/84
- 4 dk
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.
Başlangıç kodu
import { useRef, useEffect } from "react";
// SearchBox bileşenini buraya yazÖrnek çözüm
import { useRef, useEffect } from "react";
function SearchBox() {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current.focus();
}, []);
return <input ref={inputRef} placeholder="Ara" />;
}
export default SearchBox;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 DOM bağlama
DOM öğesine ref bağlamak için ____ özniteliği kullanılır.DOM öğesine ref bağlamak için ref özniteliği kullanılır.Açıklama: ref özniteliği ile bağ yapılır.
2 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 Doğru cevap
Açıklama: Programlı odaklama için useRef kullanılır.
3 DOM ref adımlarını eşleştir
| Kavram | Anlamı |
|---|---|
useRef(null) |
İlk değer |
ref={inputRef} |
Bağlama |
current.focus() |
Odalama |
useEffect |
Yan etki |