Употреба на hook-от useRef за DOM во React

На една од претходните лекции споменавме, дека рефовите најчесто се користат за пристап до DOM елементи.

Рефовите ќе ви помогат тогаш, кога на пример, треба да фокусирате на елемент, да направите скрол или да ги пресметате неговите димензии и позиција, а можеби да користите некои негови методи или својства, бидејќи за такви работи во React нема вградени методи.

Да погледнеме на пример со input, како се прави ова. Ајде да создадеме компонента со input и копче:

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

За почеток, да го импортираме во компонентата useRef:

import { useRef } from 'react';

И да креираме реф ref во компонентата. Иницијализираме ја со вредност null:

const ref = useRef(null);

Да додадеме на копчето handler за клик:

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

За да имаме пристап до input-от, да го запишеме нашиот реф ref во атрибутот ref на input-от. На овој начин, кога React ќе креира DOM јазол за овој input, тој ќе ја стави референцата кон него во ref.current и ние ќе можеме да ги користиме методите на input-от:

<input ref={ref} />

И конечно, да додадеме функција за обработка на клик, така што при клик на копчето, на input-от да се постави фокус. Сега можеме да го направиме ова преку рефот, во кој се наоѓа референцата кон нашиот input, пристапувајќи до неговиот метод focus:

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

Кликнете на копчето и проверете, дека на input-от се поставува фокус.

Земете го кодот на компонентата App, кој го напишавме на оваа лекција и направете така што при клик на копчето во input-от покрај поставување на фокус да се случи и чистење на полето за внесување. Искористете го за ова својството value на input-от.