la propriété &#target&# n'existe pas sur le type &#HTMLInputElement&#

L'erreur "La propriété 'cible' n'existe pas sur le type 'HTMLInputElement'" se produit car TypeScript essaie de vous aider à écrire du code plus sûr et attend de vous que vous soyez précis sur les types. des choses avec lesquelles vous travaillez.

Voici ce que cela signifie en termes simples :

Imaginez que vous avez un jouet et que vous essayez d'appuyer sur le bouton, mais vous appuyez sur la mauvaise partie du jouet. Le jouet dit : "Hé ! Il n'y a pas de bouton ici !" De même, TypeScript vous dit : « Vous essayez de trouver la « cible » (bouton ou objet) au mauvais endroit ! »

En programmation Web, lorsque vous utilisez un événement (comme cliquer ou taper), la cible est l'élément (comme une zone de saisie) qui a déclenché l'événement. Si vous obtenez cette erreur, cela signifie que vous ne dites pas à TypeScript que vous travaillez correctement avec un événement impliquant la zone de saisie.

Pour résoudre ce problème, vous devez indiquer clairement que vous gérez l'événement correctement, afin que TypeScript sache où chercher la « cible » (zone de saisie ou tout ce qui a déclenché l'événement).

Pour corriger l'erreur « La propriété 'target' n'existe pas sur le type 'HTMLInputElement' », vous devez vous assurer que TypeScript sait que l'événement avec lequel vous travaillez est du type correct et que event.target fait référence à un HTMLInputElement.

Voici un exemple de code qui montre comment gérer cela correctement :

Code incorrect :

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

Dans ce code incorrect, TypeScript ne sait pas que event.target est un HTMLInputElement car l'événement est de type FormEvent, qui a une cible plus générale.

Code correct (solution) :
Pour résoudre ce problème, nous devons utiliser event.currentTarget ou convertir explicitement event.target en HTMLInputElement.

Solution 1 : Utiliser event.currentTarget
currentTarget fait toujours référence à l'élément auquel l'événement est attaché, qui dans ce cas est l'élément d'entrée.

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

Solution 2 : caster event.target en HTMLInputElement
Une autre option consiste à indiquer explicitement à TypeScript que event.target est un HTMLInputElement.

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

Exemple complet :

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;

Explication :
event.currentTarget garantit que vous faites référence à l'élément auquel le gestionnaire d'événements est attaché (l'entrée dans ce cas).
React.ChangeEvent est un type d'événement plus spécifique utilisé pour les entrées de formulaire, qui fournit une cible plus précise. Cela indique à TypeScript que la cible sera un HTMLInputElement, puis que .value sera disponible sans erreur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!