Hooken useRef gör det möjligt att skapa en variabel som håller en referens till ett element, ett värde eller annan data som inte påverkar komponentens rendering. Detta är användbart för att lagra föränderliga värden, komma åt DOM-element eller bevara värden mellan komponentrenderingar.

Syntax:

För att använda hooken useRef deklareras en variabel (refVariable) och resultatet av att anropa useRef() tilldelas denna. Valfritt kan ett initialvärde (initialValue) anges som argument till hooken.

const refVariable = useRef(initialValue);

Observera

Det aktuella värdet kan nås och uppdateras via egenskapen refVariable.current. Fördelen med useRef är att det möjliggör hantering av dessa värden utan att utlösa en omrendering av komponenten.

Exempel:

Vi skapar komponenten FormInput som använder hooken useRef för att skapa en referens till ett input-element och fokuserar på det när en knapp klickas.

import React, { useRef } from "react";

const FormInput = () => {
  const inputRef = useRef();

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

I detta exempel skapar hooken useRef en referens kallad inputRef. Denna referens tilldelas attributet ref på input-elementet, vilket gör det möjligt att komma åt input-elementet via inputRef.current.

Rad-för-rad-förklaring:

• Rad 1: Vi importerar hooken useRef från React-biblioteket för att använda dess funktionalitet;
• Rad 3: Komponentet FormInput definieras med konventionell funktionssyntax;
• Rad 4: Vi initierar variabeln inputRef med hooken useRef, vilket representerar input-referensen;
• Raderna 6-8: Denna JavaScript arrow-funktion hanterar logiken för knapptrycket, vilket fokuserar användarens markör på inmatningsfältet;
• Raderna 10-15: Komponentens markup renderas.

1. På rad 12 sätter vi referensen med attributet ref och tilldelar variabeln inputRef som dess värde;
2. Knappen på rad 13 använder attributet onClick för att ange vilken funktion som ska köras vid klick, vilket i detta fall är funktionen handleClick.

Fullständig appkod: