React да DOM учун useRef хукни қўллаш

Олдинги дарсларнинг бирида биз рефлар кўпинча DOM элементларига кириш учун қўлланилишини тилга олган эдик.

Рефлар сизга, масалан, элементга фокусланиш, скрол қилиш ёки унинг ўлчамлари ва жойлашишини ҳисоблаш керак бўлганда, ёки унинг баъзи методлари ва хусусиятларидан фойдаланиш керак бўлганда ёрдамга келади, чунки React да бундай ишлар учун ички методлар мавжуд эмас.

Келгинг, инпут мисолида бунинг қандай бажарилишини кўрамиз. Инпут ва тугмаси бор компонент яратамиз:

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

Бошлаш учун, компонентга useRef ни импорт қиламиз:

import { useRef } from 'react';

Ва компонентда ref рефни яратамиз. Уни null қиймати билан инициализация қиламиз:

const ref = useRef(null);

Тугмачага клик ишловчисини бирiktамиз:

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

Инпутга кириш имкониятига эга бўлиш учун, бизнинг ref рефимизни инпутнинг ref атрибутига ёзамиз. Шу тариқа, React бу инпут учун DOM тугунни яратиш вақтида, унинг ҳаvolасини ref.current га joylab беради ва биз инпут методларидан фойдалана оламиз:

<input ref={ref} />

Ва ниҳоят, тугмача босилганда инпутга фокус ўтказиш учун кликни ишловchi функциани қўшамиз. Энди биз буни реф орқали бажара оламиз, унда бизнинг инпутимизга ҳаvolа мавжуд, унинг focus методига мурожаат қилиш орқали:

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

Тугмачани босинг ва инпутга фокус ўтказилишини ўзингиз кўриб чиқинг.

Биз бу дарсда ёзган App компоненти кодини олинг ва тугма босилганда инпутда фокус ўтказиш билан бирга кириш майдонини тозалаш ҳам амалга оширилишини таъминланг. Бунинг учун инпутнинг value хусусиятидан фойдаланинг.