Примена 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 уносног поља.