En el siguiente ejemplo vamos a guardar la referencia en el DOM a un elemento <input>
y vamos a cambiar el foco a ese elemento cuando hacemos clic en el botón.
import { useRef } from 'react'
function TextInputWithFocusButton() {
const inputEl = useRef(null)
const onButtonClick = () => {
// `current` apunta al elemento inputEl montado
inputEl.current.focus()
}
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
)
}
Creamos una referencia inputEl
con useRef
y la pasamos al elemento <input>
como prop ref
. Cuando el componente se monta, la referencia inputEl
apunta al elemento <input>
del DOM.
Para acceder al elemento del DOM, usamos la propiedad current
de la referencia.