0Pricing
React Academy · Lektion

Events und Refs in TypeScript typisieren

Verwenden Sie React.ChangeEvent, React.MouseEvent und RefObject-Generics für Interaktionen mit dem DOM.

Events und Refs in TypeScript typisieren ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Synthetische React-Events

React kapselt native DOM-Events in SyntheticEvent. Für jeden Eventtyp gibt es einen spezifischen Generic: React.ChangeEvent<HTMLInputElement>, React.MouseEvent<HTMLButtonElement> usw.

onChange typisieren

Das häufigste Event ist onChange bei Eingabefeldern. Typisieren Sie den Handler mit 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} />;
}

onClick typisieren

Button-Klicks verwenden React.MouseEvent<HTMLButtonElement>. Mit vollständiger Typisierung können Sie sicher auf e.currentTarget, e.preventDefault() und e.stopPropagation() zugreifen.

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

onSubmit typisieren

Zum Absenden eines Formulars verwenden Sie React.FormEvent<HTMLFormElement>. Rufen Sie immer e.preventDefault() auf, um die standardmäßige Browser-Navigation zu verhindern.

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>
  );
}

Tastatur-Events typisieren

Verwenden Sie React.KeyboardEvent<HTMLElement>, um Tastatur-Handler zu typisieren. So können Sie sicher auf e.key, e.code und e.ctrlKey zugreifen.

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

useRef für DOM-Elemente

Übergeben Sie den Typ des HTML-Elements als Generic an useRef und initialisieren Sie ihn mit null. TypeScript weiß dann, dass die Referenz diesen Elementtyp enthält.

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

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

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

Veränderliche Referenz vs. DOM-Referenz

Wenn Sie einen veränderlichen Wert (keinen DOM-Knoten) speichern, initialisieren Sie useRef mit einem Wert statt mit null. TypeScript leitet dann ein veränderliches MutableRefObject ab.

// 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

useImperativeHandle typisieren

Wenn Sie eine Ref-API aus einer untergeordneten Komponente bereitstellen, definieren Sie ein Interface für das Handle und verwenden Sie es sowohl in forwardRef als auch in 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

Ein Ref-Callback erhält das DOM-Element oder null. Typisieren Sie ihn als (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 vs. Current-Target

e.target ist das Element, das das Event ausgelöst hat; e.currentTarget ist das Element, an das der Handler angehängt ist. Konvertieren Sie e.target, wenn Sie bestimmte Eigenschaften benötigen.

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

Generischer Event-Handler-Typ

Um wiederverwendbare Event-Handler-Funktionen zu schreiben, verwenden Sie den Generic React.EventHandler<Event> oder schreiben Sie einfach die vollständige Funktionssignatur inline.

type InputChangeHandler = React.ChangeEventHandler<HTMLInputElement>;

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

Kurztest

Welchen TypeScript-Typ sollten Sie für ein useRef verwenden, das ein HTMLInputElement enthält?

Zusammenfassung

Typisieren Sie Event-Handler mit den Generics React.ChangeEvent, React.MouseEvent und React.FormEvent. Typisieren Sie DOM-Refs mit useRef<HTMLElement>(null) und veränderliche Refs mit dem Werttyp. Verwenden Sie forwardRef mit einem expliziten Handle-Interface für imperative APIs.

Häufig gestellte Fragen

Ist die Lektion „Events und Refs in TypeScript typisieren“ kostenlos?

Ja — der vollständige Text von „Events und Refs in TypeScript typisieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Events und Refs in TypeScript typisieren“?

Verwenden Sie React.ChangeEvent, React.MouseEvent und RefObject-Generics für Interaktionen mit dem DOM. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Events und Refs in TypeScript typisieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Props und Rückgabetypen von Components typisieren
  2. Events und Refs in TypeScript typisieren
  3. Generische Components und Utility Types
  4. Context und Custom Hooks typisieren
← Zurück zu React Academy