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 касиетин колдонуңуз.