useRef ჰუკის გამოყენება DOM-თან მუშაობისთვის React-ში

ერთ-ერთ წინა გაკვეთილზე ჩვენ აღვნიშნეთ, რომ რეფები ყველაზე ხშირად გამოიყენება DOM ელემენტებთან წვდომისთვის.

რეფები დაგვეხმარება იმ შემთხვევებში, როდესაც თქვენ, მაგალითად, გჭირდებათ ელემენტზე ფოკუსის გადატანა, სკროლის გაკეთება ან მისი ზომის და პოზიციის გამოთვლა, ან შესაძლოა რამდენიმე მისი მეთოდის ან თვისების გამოყენება, რადგან ასეთი რამეებისთვის React-ში ჩაშენებული მეთოდები არ არსებობს.

მოდით შევხედოთ ინფუთის მაგალითს, როგორ კეთდება ეს. შევქმნათ კომპონენტი ინფუთით და ღილაკით:

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

დასაწყისისთვის, კომპონენტში იმპორტირება useRef:

import { useRef } from 'react';

და შევქმნათ რეფი ref კომპონენტში. ინიციალიზაცია გავაკეთოთ მნიშვნელობით null:

const ref = useRef(null);

დავამატოთ ღილაკზე დაჭერის დამმუშავებელი:

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

რომ გვქონდეს წვდომა ინფუთზე, ჩავწეროთ ჩვენი რეფი ref ინფუთის ატრიბუტ ref-ში. ამ გზით, როდესაც React შექმნის ამ ინფუთის DOM კვანძს, ის მის მისამართს ref.current-ში ჩააწერს და ჩვენ შევძლებთ ინფუთის მეთოდების გამოყენებას:

<input ref={ref} />

და ბოლოს, დავამატოთ ფუნქცია დაჭერის დასამუშავებლად, რომ ღილაკზე დაჭერისას, ინფუთზე გადავიტანოთ ფოკუსი. ახლა ჩვენ ეს შეგვიძლია გავაკეთოთ რეფის მეშვეობით, რომელშიც ინახება მისამართი ჩვენს ინფუთზე, მის მეთოდ focus-ს მივმართოთ:

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

დააჭირეთ ღილაკს და დარწმუნდით, რომ ინფუთზე გადადის ფოკუსი.

აიღეთ კომპონენტის App კოდი, რომელიც ჩვენ ამ გაკვეთილზე დავწერეთ და გააკეთეთ ისე, რომ ღილაკზე დაჭერისას ინფუთში ფოკუსის გადატანასთან ერთად მოხდეს აგრეთვე შეყვანის ველის გასუფთავება. ამისთვის გამოიყენეთ ინფუთის თვისება value.