# Применение хука 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` инпута.

← →
↑