Hooki useRef kasutamine DOM-iga Reactis

Ühel eelmistest tundidest mainisime, et ref-id leiavad kõige sagedamini rakendust DOM elementidele juurdepääsuks.

Ref-id tulevad appi siis, kui te näiteks vajate elemendile fookuse seadmist, kerimise tegemist või selle suuruse ja positsiooni arvutamist, või soovite kasutada mõningaid selle meetodeid või omadusi, kuna Reactis selliste asjade jaoks pole sisse ehitatud meetodeid.

Vaatame näitel sisendväliaga (input), kuidas seda tehakse. Loome komponendi sisendväljaga ja nupuga:

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

Alustuseks importige komponenti useRef:

import { useRef } from 'react';

Ja loome komponendis ref-i ref. Initsialiseerime selle väärtusega null:

const ref = useRef(null);

Lisame nupule kliki käitleja:

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

Et sisendväljale juurdepääs oleks, paneme oma ref-i ref sisendvälja atribuuti ref. Nii, kui React loob selle sisendvälja jaoks DOM sõlme, paneb ta viite sellele ref.current-i ja me saame kasutada sisendvälja meetodeid:

<input ref={ref} />

Ja lõpetuseks, lisame kliki käitlemise funktsiooni, et nupule vajutades saaks sisendväljale seada fookuse. Nüüd saame seda teha ref-i kaudu, milles asub viide meie sisendväljale, pöördudes selle meetodi focus poole:

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

Vajutage nupule ja veenduge, et sisendväljale seatakse fookus.

Võtke komponendi App kood, mille me sellel tunnil kirjutasime ja tehke nii, et nupule vajutades sisendväljas toimuks peale fookuse seadmist ka sisestusvälja puhastamine. Kasutage selleks sisendvälja omadust value.