Matumizi ya useRef Hook kwa DOM katika React

Katika moja ya masomo yaliyopita tulitaja, kwamba mara nyingi refs hutumiwa kwa upatikanaji wa vipengele vya DOM.

Refs zitakusaidia pale unapohitaji, kwa mfano, kulenga kipengele, kufanya scroll au kuhesabu ukubwa wake na msimamo, au labda kutumia baadhi ya mbinu zake au sifa, kwa sababu kwa mambo kama haya hakuna mbinu zilizojengwa ndani ya React.

Wacha tuangalie kwa mfano na input, jinsi hii inafanyika. Wacha tuunde sehemu na input na kifungo:

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

Kuanza, wacha tuingize katika sehemu useRef:

import { useRef } from 'react';

Na tuunde ref ref katika sehemu. Tuanzishe kwa thamani null:

const ref = useRef(null);

Wacha tuweke kichujio cha kubonyeza kwenye kifungo:

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

Ili kuwa na upatikanaji wa input, tuandike ref yetu ref katika sifa ref ya input. Kwa njia hii, wakati React utakuwa unaunda kiunga cha DOM kwa input hii, ataweka kiungo kwenye hiyo kwenye ref.current na tutaweza kutumia mbinu za input:

<input ref={ref} />

Na hatimaye, tuongeze utendakazi wa kuchakata kubonyeza, ili wakati wa kubofya kifungo, kwenye input iweze kuwa na lengo. Sasa tunaweza kufanya hivyo kupitia ref, ambayo ina kiungo kwenye input yetu, kwa kurejelea kipengele chake focus:

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

Bonyeza kifungo na uhakikishe kwamba input inalengwa.

Chukua msimbo wa sehemu App, ambayo tuliandika katika somo hili na fanya ili wakati wa kubofya kifungo kwenye input badala ya kulenga tu pia kufanywa na kusafisha uga wa kuingiza. Tumia kwa hili sifa value ya input.