useRef-hookin käyttö DOM:lle Reactissa

Yhdellä aiemmista tunneista mainitsimme, että refit käytetään yleisimmin DOM-elementtejen käyttämiseen.

Refit tulevat apuun silloin, kun sinun on esimerkiksi keskityttävä elementtiin, tehtävä skrollaus tai laskettava sen koko ja sijainti, tai mahdollisesti hyödynnettävä jotain sen menetelmiä tai ominaisuuksia, sillä Reactissa ei ole sisäänrakennettuja menetelmiä tällaisia asioita varten.

Katsotaan esimerkillä input-kentästä, kuinka tämä tehdään. Luodaan komponentti input-kentällä ja painikkeella:

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

Aluksi, tuodaan komponenttiin useRef:

import { useRef } from 'react';

Ja luodaan ref ref komponenttiin. Alustetaan se arvolla null:

const ref = useRef(null);

Lisätään painikkeelle klikkauksen käsittelijä:

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

Jotta meillä on pääsy input-kenttään, kirjoitetaan ref ref input-kentän ref-attribuuttiin. Näin, kun React luo DOM-solmun tälle input-kentälle, se asettaa viittauksen siihen kohtaan ref.current ja voimme käyttää input-kentän menetelmiä:

<input ref={ref} />

Ja lopuksi, lisätään klikkauksen käsittelyfunktio, jotta painiketta klikattaessa, input-kenttään kohdistetaan fokus. Nyt voimme tehdä tämän refin kautta, jossa on viite input-kentaamme, käyttämällä sen menetelmää focus:

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

Paina painiketta ja varmista, että input-kenttään kohdistuu fokus.

Ota App-komponentin koodi, joka kirjoitimme tällä tunnilla ja tee niin, että painiketta klikattaessa input-kentässä fokuksen lisäksi tapahtuu myös kentän tyhjennys. Käytä tähän input-kentän ominaisuutta value.