React Academy · Lektion

Typning av events och refs i TypeScript

Använd generics med React.ChangeEvent, React.MouseEvent och RefObject för DOM-interaktioner.

Lektion 2 av 413 steg

Typning av events och refs i TypeScript är en gratis lektion i React Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

React Synthetic Events

React omsluter inbyggda DOM-händelser i SyntheticEvent. Varje händelsetyp har en specifik generisk typ: React.ChangeEvent<HTMLInputElement>, React.MouseEvent<HTMLButtonElement> och så vidare.

Typbestämma onChange

Den vanligaste händelsen är onChange på inmatningsfält. Typbestäm hanteraren med React.ChangeEvent<HTMLInputElement>.

function SearchInput() {
  const [value, setValue] = useState('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  return <input value={value} onChange={handleChange} />;
}

Typbestämma onClick

Klick på knappar använder React.MouseEvent<HTMLButtonElement>. Du kan komma åt e.currentTarget, e.preventDefault() och e.stopPropagation() med fullständig typning.

function DeleteButton({ onDelete }: { onDelete: () => void }) {
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation();
    onDelete();
  };
  return <button onClick={handleClick}>Delete</button>;
}

Typbestämma onSubmit

Formulär skickas med React.FormEvent<HTMLFormElement>. Anropa alltid e.preventDefault() för att stoppa webbläsarens standardnavigering.

function LoginForm() {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const form = e.currentTarget;
    const email = (form.elements.namedItem('email') as HTMLInputElement).value;
    console.log(email);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input name="email" />
      <button type="submit">Login</button>
    </form>
  );
}

Typbestämma tangentbordshändelser

Använd React.KeyboardEvent<HTMLElement> för att typbestämma tangentbordshanterare. Du kan säkert komma åt e.key, e.code och e.ctrlKey.

function CommandInput() {
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter' && e.metaKey) {
      submitCommand();
    }
  };
  return <input onKeyDown={handleKeyDown} />;
}

useRef för DOM-element

Ange HTML-elementtypen som generisk typ till useRef och initiera den med null. Då vet TypeScript att ref-en innehåller den aktuella elementtypen.

function AutoFocusInput() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} />;
}

Muterbar ref jämfört med DOM-ref

När du lagrar ett muterbart värde, inte en DOM-nod, initierar du useRef med ett värde i stället för null. TypeScript infererar då ett muterbart MutableRefObject.

// DOM ref (read-only current)
const divRef = useRef<HTMLDivElement>(null);

// Mutable ref (read-write current)
const countRef = useRef<number>(0);
countRef.current += 1; // ✓ no TypeScript error

Typbestämma useImperativeHandle

När du exponerar ett ref-API från en underordnad komponent definierar du ett gränssnitt för handtaget och använder det både i forwardRef och useImperativeHandle.

interface DialogHandle {
  open: () => void;
  close: () => void;
}

const Dialog = forwardRef<DialogHandle, { title: string }>((props, ref) => {
  useImperativeHandle(ref, () => ({
    open: () => console.log('open'),
    close: () => console.log('close'),
  }));
  return <div>{props.title}</div>;
});

Ref-callbacks

En ref-callback tar emot DOM-elementet eller null. Typbestäm den som (node: HTMLElement | null) => void.

function MeasureDiv() {
  const [height, setHeight] = useState(0);

  const measuredRef = (node: HTMLDivElement | null) => {
    if (node) setHeight(node.getBoundingClientRect().height);
  };

  return <div ref={measuredRef}>Content: {height}px tall</div>;
}

Event Target jämfört med Current Target

e.target är elementet som utlöste händelsen, medan e.currentTarget är elementet som hanteraren är kopplad till. Typomvandla e.target när du behöver specifika egenskaper.

const handleClick = (e: React.MouseEvent<HTMLUListElement>) => {
  const target = e.target as HTMLLIElement;
  console.log(target.dataset.id);
};

Generisk typ för händelsehanterare

Om du vill skriva återanvändbara händelsehanterarfunktioner kan du använda den generiska typen React.EventHandler<Event> eller skriva hela funktionssignaturen direkt.

type InputChangeHandler = React.ChangeEventHandler<HTMLInputElement>;

const logChange: InputChangeHandler = (e) => {
  console.log(e.target.value); // e is fully typed
};

Snabbtest

Vilken TypeScript-typ bör du använda för en useRef som innehåller ett HTMLInputElement?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Typbestäm händelsehanterare med generiska typer som React.ChangeEvent, React.MouseEvent och React.FormEvent. Typbestäm DOM-refar med useRef<HTMLElement>(null) och muterbara refar med värdetypen. Använd forwardRef med ett explicit gränssnitt för handtaget när du skapar imperativa API:er.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Typning av events och refs i TypeScript” gratis?

Ja – hela texten till ”Typning av events och refs i TypeScript” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Typning av events och refs i TypeScript”?

Använd generics med React.ChangeEvent, React.MouseEvent och RefObject för DOM-interaktioner. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Typning av events och refs i TypeScript”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Typning av props och komponenters returtyper
Typning av events och refs i TypeScript
Generiska komponenter och utility types
Typning av context och custom hooks

← Tillbaka till React Academy