React Academy · leksjon

Type events og refs i TypeScript

Bruk generiske typer med React.ChangeEvent, React.MouseEvent og RefObject for interaksjoner med DOM-en.

Leksjon 2 av 413 trinn

Type events og refs i TypeScript er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Syntetiske React-hendelser

React pakker inn opprinnelige DOM-hendelser i SyntheticEvent. Hver hendelsestype har en spesifikk generisk type: React.ChangeEvent<HTMLInputElement>, React.MouseEvent<HTMLButtonElement> og så videre.

Typing av onChange

Den vanligste hendelsen er onChange på inndatafelt. Typ hendelsesbehandleren 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} />;
}

Typing av onClick

Knappklikk bruker React.MouseEvent<HTMLButtonElement>. Med fullstendig typing får De trygg tilgang til e.currentTarget, e.preventDefault() og e.stopPropagation().

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

Typing av onSubmit

Skjemainnsending bruker React.FormEvent<HTMLFormElement>. Kall alltid e.preventDefault() for å hindre nettleserens 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>
  );
}

Typing av tastaturhendelser

Bruk React.KeyboardEvent<HTMLElement> for å type tastaturbehandlere. Da får De trygg tilgang til e.key, e.code og e.ctrlKey.

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

useRef for DOM-elementer

Send HTML-elementtypen som generisk type til useRef, og initialiser den til null. Da vet TypeScript at ref-en inneholder denne elementtypen.

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

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

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

Muterbar ref kontra DOM-ref

Når De lagrer en muterbar verdi, og ikke en DOM-node, skal useRef initialiseres med en verdi i stedet for null. TypeScript utleder da en muterbar 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

Typing av useImperativeHandle

Når et ref-API eksponeres fra en underordnet komponent, bør De definere et grensesnitt for håndtaket og bruke det både i forwardRef og 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-callbacker

En ref-callback mottar DOM-elementet eller null. Typ 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 kontra current target

e.target er elementet som utløste hendelsen, mens e.currentTarget er elementet hendelsesbehandleren er knyttet til. Cast e.target når De trenger spesifikke egenskaper.

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

Generisk type for hendelsesbehandlere

For å skrive gjenbrukbare funksjoner for hendelsesbehandling kan De bruke den generiske React.EventHandler<Event>, eller skrive hele funksjonssignaturen direkte.

type InputChangeHandler = React.ChangeEventHandler<HTMLInputElement>;

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

Hurtigsjekk

Hvilken TypeScript-type bør De bruke for en useRef som inneholder et HTMLInputElement?

Besvar den i den interaktive leksjonen

Oppsummering

Typ hendelsesbehandlere med generiske typer som React.ChangeEvent, React.MouseEvent og React.FormEvent. Typ DOM-ref-er med useRef<HTMLElement>(null) og muterbare ref-er med verditypen. Bruk forwardRef med et eksplisitt håndtaksgrensesnitt for imperative API-er.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Type events og refs i TypeScript» gratis?

Ja – hele teksten i «Type events og refs i TypeScript» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Type events og refs i TypeScript»?

Bruk generiske typer med React.ChangeEvent, React.MouseEvent og RefObject for interaksjoner med DOM-en. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Type events og refs i TypeScript»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Type props og returtyper for komponenter
Type events og refs i TypeScript
Generiske komponenter og utility-typer
Type Context og egendefinerte hooks

← Tilbake til React Academy