&#HTMLInputElement&# 유형에 &#target&# 속성이 존재하지 않습니다.

"HTMLInputElement' 유형에 'target' 속성이 존재하지 않습니다."라는 오류는 TypeScript가 더 안전한 코드를 작성하도록 돕고 유형에 대해 구체적으로 설명할 것으로 기대하기 때문에 발생합니다. 작업 중입니다.

간단히 말하면 다음과 같습니다.

장난감이 있는데 버튼을 누르려고 하는데 장난감의 잘못된 부분을 누르고 있다고 상상해 보세요. 장난감이 "야! 여기에는 버튼이 없어!"라고 말합니다. 마찬가지로 TypeScript는 "'대상'(버튼 또는 개체)을 잘못된 위치에서 찾으려고 합니다!"라고 알려줍니다.

웹 프로그래밍에서 이벤트(예: 클릭 또는 입력)를 사용할 때 대상은 이벤트를 트리거한 요소(예: 입력 상자)입니다. 이 오류가 발생하면 입력 상자와 관련된 이벤트로 작업하고 있음을 TypeScript에 제대로 알리지 않는다는 의미입니다.

이 문제를 해결하려면 이벤트를 올바르게 처리하고 있음을 명확히 해야 TypeScript가 '대상'(입력 상자 또는 이벤트를 트리거한 모든 항목)을 찾을 위치를 알 수 있습니다.

---

"'HTMLInputElement' 유형에 'target' 속성이 존재하지 않습니다."라는 오류를 수정하려면 작업 중인 이벤트가 올바른 유형이고 해당 event.target이 참조하는지 TypeScript가 알고 있는지 확인해야 합니다. HTMLInputElement.

다음은 이를 올바르게 처리하는 방법을 보여주는 코드 예제입니다.

잘못된 코드:

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

이 잘못된 코드에서 TypeScript는 이벤트가 더 일반적인 대상을 갖는 FormEvent 유형이기 때문에 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로 전송
또 다른 옵션은 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가 되고 .value를 오류 없이 사용할 수 있음을 TypeScript에 알려줍니다.

위 내용은 &#HTMLInputElement&# 유형에 &#target&# 속성이 존재하지 않습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!