useRef հուկի կիրառումը DOM-ի հետ React-ում

Նախորդ դասերից մեկում մենք նշեցինք, որ ref-երը առավել հաճախ օգտագործվում են DOM տարրերին մուտք ունենալու համար:

Ref-երը կօգնեն ձեզ, երբ, օրինակ, պետք է ֆոկուս դնել տարրի վրա, կատարել սքրոլ կամ հաշվարկել դրա չափերն ու դիրքը, կամ էլ օգտվել դրա որոշ մեթոդներից կամ հատկություններից, քանի որ React-ում նման բաների համար ներկառուցված մեթոդներ չկան:

Դիտարկենք օրինակ input-ի հետ, թե ինչպես է դա արվում: Ստեղծենք կոմպոնենտ input-ով և կոճակով.

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

Սկզբում, կոմպոնենտում իմպորտ անենք useRef-ը.

import { useRef } from 'react';

Եվ կոմպոնենտում ստեղծենք ref ref: Նախաստորագրենք այն null արժեքով.

const ref = useRef(null);

Կոճակին ավելացնենք կլիկի օբյեկտը.

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

Input-ին մուտք ունենալու համար, գրենք մեր ref ref-ը input-ի ref ատրիբուտում: Այսպիսով, երբ React-ը կստեղծի այս input-ի DOM հանգույցը, այն կտեղադրի հղումը դրա վրա ref.current-ում, և մենք կկարողանանք օգտագործել input-ի մեթոդները.

<input ref={ref} />

Եվ վերջապես, ավելացնենք կլիկի մշակման ֆունկցիան, որպեսզի կոճակի վրա կլիկ անելիս, input-ի վրա ֆոկուս դրվի: Այժմ մենք կարող ենք դա անել ref-ի միջոցով, որում պահվում է հղումը մեր input-ին, դիմելով դրա focus մեթոդին.

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

Սեղմեք կոճակի վրա և համոզվեք, որ input-ի վրա ֆոկուս է դրվում:

Վերցրեք App կոմպոնենտի կոդը, որը մենք գրեցինք այս դասին և արեք, որ կոճակի վրա կլիկ անելիս input-ում, բացի ֆոկուս դնելուց, տեղի ունենա նաև մուտքադաշտի մաքրում: Դրա համար օգտագործեք input-ի value հատկությունը: