React-те DOM үшін useRef хукін қолдану

Алдыңғы сабақтардың бірінде біз айтқанбыз, рефтар ең жиі 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 қасиетін пайдаланыңыз.