Özet - useRef
- React kursu
- Başlangıç
- Ders 76/84
- 5 dk
Bir butona basınca input'a otomatik odaklanan bir form yazarsın.
Özet - useRef
Bu grupta useRef'in ne olduğunu, state'ten farkını, DOM öğesine erişim için nasıl kullanıldığını ve zamanlayıcı kimliği saklamak için nasıl yararlı olduğunu gördün.
İki ana kullanım: ref={ '{ inputRef }' } ile DOM öğesine bağlamak ve ref.current = ... ile sessizce değer saklamak. Her ikisinde de çizim tetiklenmez.
Bir sonraki adımda hem DOM erişimi hem değer saklama birlikte çalışan bir onay kutusu bileşeni yazacaksın.
Uygulama Onay kutusu bileşeni
Aşağıdaki iskeleti tamamla. Checkbox bileşeni yaz. inputRef = useRef(null) oluştur. Bir checked state'i tut. <input type="checkbox" ref={ '{ inputRef }' } checked={ '{ checked }' } onChange={ '{ ... }' } /> göster; onChange ile setChecked(c => !c) çağrılsın. Bir <label>Onay</label> ekle. Dışa aktar.
Başlangıç kodu
import { useRef, useState } from "react";
// Checkbox bileşenini buraya yazÖrnek çözüm
import { useRef, useState } from "react";
function Checkbox() {
const inputRef = useRef(null);
const [checked, setChecked] = useState(false);
return (
<div>
<input type="checkbox" ref={inputRef} checked={checked} onChange={() => setChecked((c) => !c)} />
<label>Onay</label>
</div>
);
}
export default Checkbox;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useRef ile setState farkı nedir?
- useRef sadece sayı tutar
- useRef çizim tetiklemez Doğru cevap
- setState kullanılamaz
- useRef daha hızlıdır
Açıklama: useRef çizim tetiklemez.
2 useRef adımlarını eşleştir
| Kavram | Anlamı |
|---|---|
useRef(null) |
İlk değer |
ref={inputRef} |
Bağlama |
current |
Erişim |
clearInterval |
Temizlik |