Özet - useRef

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.

Örnek çözümü göster

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;

Kendini test et

useRef ile setState farkı nedir?
- useRef sadece sayı tutar
- useRef çizim tetiklemez
- setState kullanılamaz
- useRef daha hızlıdır
Cevabı göster

useRef çizim tetiklemez — useRef çizim tetiklemez.
useRef adımlarını eşleştir

useRef(null)

İlk değer
ref={inputRef}

Bağlama
current

Erişim
clearInterval

Temizlik

Sıradaki ders: Proje: Todo uygulaması

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler