發生錯誤「屬性'目標'在類型'HTMLInputElement'上不存在」是因為TypeScript 試圖幫助您編寫更安全的程式碼，並且它希望您具體了解類型您正在處理的事情。
簡單來說它的意義如下：
想像一下你有一個玩具，你試著按下按鈕，但你按下了玩具的錯誤部分。玩具說：「嘿！這裡沒有按鈕！」同樣，TypeScript 告訴您，「您試圖在錯誤的位置找到『目標』（按鈕或物件）！」
在 Web 程式設計中，當您使用事件（例如按一下或鍵入）時，目標是觸發該事件的元素（例如輸入方塊）。如果您收到此錯誤，則表示您沒有告訴 TypeScript 您正在處理正確涉及輸入方塊的事件。
要修復此問題，您需要清楚自己正在正確處理事件，以便 TypeScript 知道在哪裡找到「目標」（輸入框或觸發事件的任何內容）。
要修正錯誤“‘HTMLInputElement’類型中不存在屬性‘target’”，您需要確保 TypeScript 知道您正在使用的事件是正確的類型，並且 event.target 引用的是一個 HTMLInputElement。
以下程式碼範例展示如何正確處理此問題：
錯誤代碼：
const handleChange = (event: React.FormEvent<HTMLInputElement>) => {
console.log(event.target.value); // Error: Property 'target' does not exist on type 'HTMLInputElement'.
};
在這段不正確的程式碼中，TypeScript 不知道 event.target 是 HTMLInputElement，因為該事件是 FormEvent 類型，它具有更通用的目標。
正確程式碼（解）：
要解決此問題，我們應該使用 event.currentTarget 或明確將 event.target 轉換為 HTMLInputElement。
解決方案1：使用event.currentTarget
currentTarget 始終引用事件所附加的元素，在本例中是輸入元素。
const handleChange = (event: React.FormEvent<HTMLInputElement>) => {
const inputValue = event.currentTarget.value;
console.log(inputValue);
};
解 2：將 event.target 轉換為 HTMLInputElement
另一個選擇是明確告訴 TypeScript event.target 是 HTMLInputElement。
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const inputValue = (event.target as HTMLInputElement).value;
console.log(inputValue);
};
完整範例：
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;
說明：
event.currentTarget 確保您引用事件處理程序所附加的元素（本例為輸入）。
React.ChangeEvent 是一種用於表單輸入的更具體的事件類型，它提供了更準確的目標。這告訴 TypeScript 目標將是一個 HTMLInputElement，然後 .value 將可用而不會發生錯誤。
以上是類型 &#HTMLInputElement&# 上不存在屬性 &#target&#的詳細內容。更多資訊請關注PHP中文網其他相關文章！
