首頁 > web前端 > js教程 > 主體

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

DDD
發布: 2024-09-29 12:18:02
原創
336 人瀏覽過

property

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

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!