プロパティ &#target&# はタイプ &#HTMLInputElement&# に存在しません

「プロパティ 'target' は型 'HTMLInputElement' に存在しません」というエラーは、TypeScript がより安全なコードを記述できるよう努めており、型について具体的に指定することを期待しているために発生します。あなたが取り組んでいるものの一部。

簡単に言うと次のとおりです。

あなたがおもちゃを持っていて、ボタンを押そうとしているのに、おもちゃの間違った部分を押していると想像してください。おもちゃは「おい！ここにはボタンがない！」と言います。同様に、TypeScript は、「間違った場所で『ターゲット』 (ボタンまたはオブジェクト) を見つけようとしています!」と伝えています。

Web プログラミングでは、イベント (クリックや入力など) を使用する場合、ターゲットはイベントをトリガーした要素 (入力ボックスなど) です。このエラーが発生した場合は、入力ボックスに関係するイベントを適切に処理していることが TypeScript に伝えられていないことを意味します。

これを修正するには、イベントを正しく処理していることを明確にし、TypeScript が「ターゲット」(入力ボックスまたはイベントをトリガーしたもの) をどこで探すべきかを認識する必要があります。

「プロパティ 'target' は型 'HTMLInputElement' に存在しません」というエラーを修正するには、操作しているイベントが正しい型であり、event.target が参照していることを TypeScript が認識していることを確認する必要があります。 HTMLInputElement。

これを適切に処理する方法を示すコード例を次に示します。

間違ったコード:

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

この間違ったコードでは、イベントのタイプが FormEvent であり、より一般的なターゲットがあるため、TypeScript は、event.target が HTMLInputElement であることを認識しません。

正しいコード (解決策):
これを修正するには、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 にキャストします
もう 1 つのオプションは、event.target が HTMLInputElement であることを TypeScript に明示的に伝えることです。

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 は、フォーム入力に使用されるより具体的なイベント タイプであり、より正確なターゲットを提供します。これにより、ターゲットが HTMLInputElement になることが TypeScript に伝えられ、エラーなしで .value が使用可能になります。

以上がプロパティ &#target&# はタイプ &#HTMLInputElement&# に存在しませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。