Un esempio di Hook useRef – Il riferimento ad un elemento nel componente funzionale (input)

Introduzione al Hook useRef per riferirci ad un elemento all’interno del Componente Funzionale

Vediamo come fare riferimento ad una Input Box che si trova all’interno del render del nostro componente funzionale per permetterci di effettuare il focus nel caso in cui si verifichi una condizione.

import React, { useRef } from 'react';

export default function TextInput() {
  // dichiarazione del riferimento al campo di input
  const inputRef = useRef(null);

  // funzione chiamata al click del pulsante per il focus del campo di input
  function handleButtonClick() {
    inputRef.current.focus();
  }

  return (
    <div>
      <label htmlFor="input-field">Inserisci un testo:</label>
      <input id="input-field" type="text" ref={inputRef} />
      <button onClick={handleButtonClick}>Focus</button>
    </div>
  );
}

In questo esempio, il componente funzionale “TextInput” utilizza il “useRef” hook per creare un riferimento al campo di input. La chiamata “useRef(null)” dichiara il riferimento “inputRef” come inizialmente null, in quanto non esiste ancora alcun elemento nel DOM.

Successivamente, viene dichiarata la funzione “handleButtonClick” che viene chiamata quando l’utente clicca sul pulsante “Focus”. Questa funzione richiama il metodo “focus()” sull’oggetto riferito dal “inputRef.current”, che rappresenta l’elemento di input creato precedentemente.

Infine, viene restituito il markup JSX del componente che include una label, un campo di input e un pulsante. Il riferimento creato con il “useRef” hook viene passato al campo di input utilizzando la proprietà “ref”, mentre la funzione “handleButtonClick” viene associata all’evento onClick del pulsante.

In questo modo, quando l’utente clicca sul pulsante “Focus”, il riferimento creato con il “useRef” hook viene utilizzato per focalizzare il campo di input, consentendo all’utente di iniziare a digitare immediatamente.