Die Eigenschaft „Ziel' existiert nicht für den Typ „HTMLInputElement'.

Der Fehler „Property ‚target‘ is not exist on type ‚HTMLInputElement‘“ tritt auf, weil TypeScript versucht, Ihnen beim Schreiben von sichererem Code zu helfen, und von Ihnen erwartet, dass Sie die Typen genau angeben der Dinge, mit denen Sie arbeiten.

Hier ist, was es in einfachen Worten bedeutet:

Stellen Sie sich vor, Sie haben ein Spielzeug und versuchen, den Knopf zu drücken, aber Sie drücken auf den falschen Teil des Spielzeugs. Das Spielzeug sagt: „Hey! Hier ist kein Knopf!“ In ähnlicher Weise sagt Ihnen TypeScript: „Sie versuchen, das ‚Ziel‘ (Schaltfläche oder Objekt) an der falschen Stelle zu finden!“

Wenn Sie bei der Webprogrammierung ein Ereignis verwenden (z. B. Klicken oder Tippen), ist das Ziel das Element (z. B. ein Eingabefeld), das das Ereignis ausgelöst hat. Wenn Sie diesen Fehler erhalten, bedeutet das, dass Sie TypeScript nicht mitteilen, dass Sie mit einem Ereignis arbeiten, das das Eingabefeld ordnungsgemäß einbezieht.

Um das Problem zu beheben, müssen Sie sich darüber im Klaren sein, dass Sie das Ereignis korrekt verarbeiten, damit TypeScript weiß, wo es nach dem „Ziel“ suchen muss (Eingabefeld oder was auch immer das Ereignis ausgelöst hat).

Um den Fehler „Eigenschaft ‚target‘ existiert nicht für Typ ‚HTMLInputElement‘“ zu beheben, müssen Sie sicherstellen, dass TypeScript weiß, dass das Ereignis, mit dem Sie arbeiten, vom richtigen Typ ist und dass event.target darauf verweist ein HTMLInputElement.

Hier ist ein Codebeispiel, das zeigt, wie man damit richtig umgeht:

Falscher Code:

const handleChange = (event: React.FormEvent<HTMLInputElement>) => {
  console.log(event.target.value); // Error: Property 'target' does not exist on type 'HTMLInputElement'.
};

In diesem falschen Code weiß TypeScript nicht, dass event.target ein HTMLInputElement ist, da das Ereignis vom Typ FormEvent ist, der ein allgemeineres Ziel hat.

Korrekter Code (Lösung):
Um dies zu beheben, sollten wir event.currentTarget verwenden oder event.target explizit in HTMLInputElement umwandeln.

Lösung 1: Verwenden Sie event.currentTarget
currentTarget bezieht sich immer auf das Element, an das das Ereignis angehängt ist, in diesem Fall das Eingabeelement.

const handleChange = (event: React.FormEvent<HTMLInputElement>) => {
  const inputValue = event.currentTarget.value;
  console.log(inputValue);
};

Lösung 2: Event.target in HTMLInputElement umwandeln
Eine andere Möglichkeit besteht darin, TypeScript explizit mitzuteilen, dass event.target ein HTMLInputElement ist.

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  const inputValue = (event.target as HTMLInputElement).value;
  console.log(inputValue);
};

Vollständiges Beispiel:

import React, { useState } from 'react';

const InputComponent: React.FC = () => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.currentTarget.value); // Safe, no error
  };

  return (
    <input 
      type="text"
      value={inputValue}
      onChange={handleChange}
    />
  );
};

export default InputComponent;

Erklärung:
event.currentTarget stellt sicher, dass Sie auf das Element verweisen, an das der Event-Handler angehängt ist (in diesem Fall die Eingabe).
React.ChangeEvent ist ein spezifischerer Ereignistyp, der für Formulareingaben verwendet wird und ein genaueres Ziel bietet. Dadurch wird TypeScript mitgeteilt, dass das Ziel ein HTMLInputElement sein wird und .value dann ohne Fehler verfügbar sein wird.

Das obige ist der detaillierte Inhalt vonDie Eigenschaft „Ziel' existiert nicht für den Typ „HTMLInputElement'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!