Përdorimi i Hook useRef për DOM në React

Në një nga mësimet e mëparshme përmendëm që ref-et përdoren më së shpeshti për qasje në elementët DOM.

Ref-et do të vijnë në ndihmë kur, për shembull, ju duhet të fokusoni një element, të bëni scroll ose të llogaritni përmasat dhe pozicionin e tij, ose ndoshta të përdorni disa nga metodat ose vetitë e tij, sepse për gjëra të tilla në React nuk ka metoda të integruara.

Le të shohim në një shembull me një input si bëhet kjo. Le të krijojmë një komponent me një input dhe një buton:

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

Për të filluar, le të importojmë në komponent useRef:

import { useRef } from 'react';

Dhe le të krijojmë një ref ref në komponent. Le ta inicializojmë atë me vlerën null:

const ref = useRef(null);

Le të vendosim në buton trajtimin e klikimit:

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

Për të pasur qasje në input, le të shkruajmë ref-in tonë ref në atributin ref të input-it. Kështu, kur React të krijojë nyjen DOM për këtë input, ai do të vendosë një referencë për të në ref.current dhe ne do të mund të përdorim metodat e input-it:

<input ref={ref} />

Dhe së fundi, le të shtojmë funksionin e trajtimit të klikimit, që kur të klikohet butoni, në input të vendoset fokusi. Tani ne mund ta bëjmë këtë përmes ref-it, në të cilin ndodhet referenca për input-in tonë, duke iu drejtuar metodës së tij focus:

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

Klikoni butonin dhe sigurohuni që fokusi vendoset në input.

Merrni kodin e komponentit App, që kemi shkruar në këtë mësim dhe bëni që me klikimin e butonit në input, përveç vendosjes së fokusit të ndodhë edhe pastrimi i fushës së input-it. Përdorni për këtë vetinë value të input-it.