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

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

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

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

App.jsxreturn (
  <div>
    <input />
    <button>focus</button>
  </div>
);

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

App.jsximport { useRef } from 'react';

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

App.jsxconst ref = useRef(null);

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

App.jsx<button onClick={handleClick}>focus</button>

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

App.jsx<input ref={ref} />

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

App.jsxfunction handleClick() {
  ref.current.focus();
}

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