類型 &#HTMLInputElement&# 上不存在屬性 &#target&#

發生錯誤「屬性'目標'在類型'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中文網其他相關文章！