harta &#target&# tidak wujud pada jenis &#HTMLInputElement&#

Ralat "Hartanah 'sasaran' tidak wujud pada jenis 'HTMLInputElement'" berlaku kerana TypeScript cuba membantu anda menulis kod yang lebih selamat dan ia menjangkakan anda khusus tentang jenis perkara yang sedang anda usahakan.

Inilah maksudnya dalam istilah mudah:

Bayangkan anda mempunyai mainan, dan anda cuba menekan butang, tetapi anda menekan bahagian mainan yang salah. Mainan itu berkata, "Hei! Tiada butang di sini!" Begitu juga, TypeScript memberitahu anda, "Anda cuba mencari 'sasaran' (butang atau objek) di tempat yang salah!"

Dalam pengaturcaraan web, apabila anda menggunakan acara (seperti mengklik atau menaip), sasaran ialah elemen (seperti kotak input) yang mencetuskan acara. Jika anda mendapat ralat ini, ini bermakna anda tidak memberitahu TypeScript bahawa anda sedang mengendalikan acara yang melibatkan kotak input dengan betul.

Untuk membetulkannya, anda perlu jelas bahawa anda mengendalikan acara dengan betul, jadi TypeScript tahu di mana hendak mencari 'sasaran' (kotak input atau apa sahaja yang mencetuskan acara).

---

Untuk membetulkan ralat "Sasaran 'Hartanah' tidak wujud pada jenis 'HTMLInputElement'", anda perlu memastikan bahawa TypeScript mengetahui bahawa acara yang anda bekerjasama adalah jenis yang betul dan event.target itu merujuk kepada HTMLInputElement.

Berikut ialah contoh kod yang menunjukkan cara mengendalikan perkara ini dengan betul:

Kod Salah:

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

Dalam kod yang salah ini, TypeScript tidak tahu bahawa event.target ialah HTMLInputElement kerana acara itu jenis FormEvent, yang mempunyai sasaran yang lebih umum.

Kod Betul (Penyelesaian):
Untuk membetulkannya, kita harus menggunakan event.currentTarget atau secara eksplisit menghantar event.target ke HTMLInputElement.

Penyelesaian 1: Gunakan event.currentTarget
currentTarget sentiasa merujuk kepada elemen yang dilampirkan acara, yang dalam kes ini ialah elemen input.

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

Penyelesaian 2: Hantar acara.sasarkan ke HTMLInputElement
Pilihan lain ialah memberitahu TypeScript secara eksplisit bahawa event.target ialah HTMLInputElement.

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

Contoh Penuh:

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;

Penjelasan:
event.currentTarget memastikan anda merujuk elemen yang dilampirkan oleh pengendali acara (input dalam kes ini).
React.ChangeEvent ialah jenis acara yang lebih khusus digunakan untuk input borang, yang menyediakan sasaran yang lebih tepat. Ini memberitahu TypeScript bahawa sasaran akan menjadi HTMLInputElement, dan kemudian .value akan tersedia tanpa ralat.

Atas ialah kandungan terperinci harta &#target&# tidak wujud pada jenis &#HTMLInputElement&#. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!