Die gebruik van die useRef-hook vir DOM in React

In een van die vorige lesse het ons genoem dat refs die meeste gebruik word vir toegang tot DOM elemente.

Refs sal te hulp kom wanneer jy, byvoorbeeld, nodig het om op 'n element te fokus, te scroll of sy afmetings en posisie te bereken, of dalk van sommige van sy metodes of eienskappe gebruik te maak, aangesien React nie ingeboude metodes vir sulke dinge het nie.

Kom ons kyk na 'n voorbeeld met 'n invoerveld, hoe dit gedoen word. Skep 'n komponent met 'n invoerveld en 'n knoppie:

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

Om te begin, voer ons in die komponent in useRef:

import { useRef } from 'react';

En skep 'n ref ref in die komponent. Inisialiseer dit met die waarde null:

const ref = useRef(null);

Plaas 'n klikhanterer op die knoppie:

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

Om toegang tot die invoerveld te hê, skryf ons ons ref ref in die ref attribuut van die invoerveld. Sodoende, wanneer React die DOM node vir hierdie invoerveld skep, sal dit 'n verwysing daarna in ref.current plaas en ons sal die metodes van die invoerveld kan gebruik:

<input ref={ref} />

En uiteindelik, voeg ons die funksie vir die hantering van die klik by, sodat wanneer daar op die knoppie geklik word, die invoerveld fokus kry. Nou kan ons dit doen deur die ref, waarin die verwysing na ons invoerveld lê, deur na sy focus metode te verwys:

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

Druk op die knoppie en maak seker dat die invoerveld fokus kry.

Neem die kode van die App komponent, wat ons in hierdie les geskryf het en maak dit so dat met 'n klik op die knoppie die invoerveld nie net fokus kry nie, maar die invoerveld ook skoongemaak word. Gebruik vir dit die value eienskap van die invoerveld.