특정 텍스트 영역 요소에 이벤트 리스너 추가

Question

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

으아악

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

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

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

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

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

   으아악

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

Answer 1

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

TEXTAREA_COMPONENT.js

으아아아

APP.js

으아아아

Answer 2

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

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