useRef hoka izmantošana DOM React

Vienā no iepriekšējām nodarbībām mēs minējām, ka refi visbiežāk tiek izmantoti piekļuvei DOM elementiem.

Refi nāks palīgā tad, kad jums, piemēram, ir nepieciešams fokusēties uz elementu, veikt scroll vai aprēķināt tā izmērus un pozīciju, vai varbūt izmantot kādas no tā metodēm vai īpašībām, jo React tam nav iebūvētu metožu.

Apskatīsim ar input piemēru, kā tas tiek darīts. Izveidosim komponentu ar input un pogu:

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

Sākumā importēsim komponentā useRef:

import { useRef } from 'react';

Un izveidosim ref ref komponentē. Inicializēsim to ar vērtību null:

const ref = useRef(null);

Pievienosim pogai klikšķa apstrādātāju:

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

Lai būtu piekļuve input, ierakstīsim mūsu ref ref input atribūtā ref. Tādējādi, kad React izveidos DOM mezglu šim input, tas ievietos atsauci uz to ref.current un mēs varēsim izmantot input metodes:

<input ref={ref} />

Un beidzot, pievienosim klikšķa apstrādes funkciju, lai pēc klikšķa uz pogas, input tiktu fokusēts. Tagad mēs to varam izdarīt caur ref, kurā atrodas atsauce uz mūsu input, piekļūstot tā metodei focus:

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

Noklikšķiniet uz pogas un pārliecinieties, ka input tiek fokusēts.

Paņemiet komponenta App kodu, ko mēs uzrakstījām šajā nodarbībā un izdariet tā, lai pēc klikšķa uz pogas input papildus fokusēšanai notiktu arī ievades lauka notīrīšana. Izmantojiet tam input īpašību value.