React'ta DOM için useRef Kancasının Kullanımı

Önceki derslerden birinde, ref'lerin en yaygın olarak DOM elemanlarına erişmek için kullanıldığından bahsetmiştik.

Ref'ler, örneğin bir elemana odaklanmanız, kaydırma yapmanız veya boyutlarını ve konumunu hesaplamanız ya da bazı metodlarını veya özelliklerini kullanmanız gerektiğinde imdadınıza yetişecek, çünkü bu tür şeyler için React'ta yerleşik metodlar yoktur.

Bir input örneği üzerinden bunun nasıl yapıldığına bakalım. Bir input ve buton içeren bir bileşen oluşturalım:

return (
	<div>
		<input />
		<button>focus</button>
	</div>
);

Öncelikle, bileşene useRef'i içe aktaralım:

import { useRef } from 'react';

Ve bileşende bir ref ref oluşturalım. Onu null değeriyle başlatalım:

const ref = useRef(null);

Butona bir tıklama işleyicisi ekleyelim:

<button onClick={handleClick}>focus</button>

Inputa erişebilmek için, ref'imiz ref'i inputun ref özniteliğine yazalım. Böylece, React bu input için DOM düğümünü oluşturduğunda, ona olan bağlantıyı ref.current içine koyacak ve biz inputun metodlarını kullanabileceğiz:

<input ref={ref} />

Ve son olarak, butona tıklandığında inputa odaklanılması için tıklama işleme fonksiyonunu ekleyelim. Artık bunu, içinde inputumuza referans bulunan ref aracılığıyla, onun focus metoduna erişerek yapabiliriz:

function handleClick() {
	ref.current.focus();
}

Butona tıklayın ve inputa odaklanıldığından emin olun.

Bu derste yazdığımız App bileşeninin kodunu alın ve butona tıklandığında inputta odaklanmanın yanı sıra giriş alanının da temizlenmesini sağlayın. Bunun için inputun value özelliğini kullanın.