특정 텍스트 영역 요소에 이벤트 리스너 추가
P粉697408921
P粉697408921 2024-01-17 08:28:40
0
2
539

저는 Next.js13에서 프로젝트를 진행 중이고 사용자 정의 텍스트 영역 구성 요소를 만들려고 합니다. 이 구성 요소에 이벤트 리스너를 추가하고 싶습니다(사용자가 입력하면 자동으로 높이를 조정할 수 있음). 이 문제와 관련된 코드 부분은 다음과 같습니다.

으아악

이 코드는 "TypeError: textarea.addEventListener가 함수가 아닙니다 " 및 "Property 'addEventListener'가 'Element' 유형에 존재하지 않습니다. " < /p> 오류를 생성합니다.

이 구성 요소로 생성된 텍스트 영역에 이 이벤트 리스너를 추가하는 방법은 무엇입니까?

제한사항 및 이전에 시도한 솔루션

  1. 사용자가 ID를 지정할 수 있기를 원하므로(필수는 아님) document.getElementById()를 사용할 수 없습니다.

  2. addEventListener 행을 다음과 같이 다시 작성하면 "속성 'addEventListener'가 '요소' 유형에 존재하지 않습니다 "가 제거되지만 "TypeError: textarea.addEventListener는 함수가 아닙니다 < /strong>"가 계속 나타납니다.

    으아악
  3. document.getElementsByTag('textarea')을 사용한 다음 반환된 모든 텍스트 영역을 반복하고 이벤트 리스너를 추가하면 작동합니다. 그러나 페이지에 여러 개의 텍스트 영역이 있는 경우 이벤트 리스너가 두 번 추가되는 것 같습니다. 페이지에 다른 구성 요소의 일부인 텍스트 영역이 있고 여기에 이 ​​이벤트 리스너를 추가하고 싶지 않다고 가정해 보겠습니다.

P粉697408921
P粉697408921

모든 응답(2)
P粉949190972

React에서는 일반 JavaScript에서처럼 JSX에서 생성된 요소에 이벤트 리스너를 직접 추가할 수 없습니다. 대신, textarea 요소의 onChange 속성을 사용하여 React 방식으로 이벤트를 처리해야 합니다.

TEXTAREA_COMPONENT.js

으아아아

APP.js

으아아아
P粉920199761

이 기능을 직접 구현하는 대신 라이브러리를 사용하고 싶다면 다음과 같은 훌륭한 라이브러리가 있습니다. 반응-텍스트 영역-자동 크기.

직접 구현하려는 경우에도 이 저장소를 가이드로 사용할 수 있습니다.

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!