特定の textarea 要素にイベント リスナーを追加する

Question

私は Next.js13 のプロジェクトに取り組んでおり、カスタム textarea コンポーネントを作成しようとしています。このコンポーネントにイベント リスナーを追加したいと考えています (ユーザーが入力するときに高さを自動的に調整できるようにします)。この問題に関連するコードの部分は次のとおりです:

リーリー

このコードでは、「TypeError: textarea.addEventListener は関数ではありません 」および「プロパティ 'addEventListener' はタイプ 'Element' に存在しません。 」というエラーが生成されます。 < /p>このコンポーネントによって作成されたテキスト領域にこのイベント リスナーを追加するにはどうすればよいですか?

制限事項と以前に試みられた解決策

1. ユーザーが ID を指定できるようにしたいのですが (必須ではありません)、

   document.getElementById() は使用できません。

2. addEventListener 行を次のように書き換えると、「

   プロパティ 'addEventListener' はタイプ 'Element' に存在しません」という問題は解消されますが、結果は「TypeError: textarea.addEventListener is not」になります。関数"はまだ:< /strong> リーリー

3. document.getElementsByTag('textarea') を使用し、返されたすべてのテキストエリアをループしてイベント リスナーを追加すると、機能します。ただし、ページ上に複数のテキストエリアがある場合、イベント リスナーが 2 回追加されるようです。ページ上に別のコンポーネントの一部であるテキスト領域があり、このイベント リスナーをそこに追加したくないとします。

Answer 1

React では、通常の JavaScript のように、JSX で作成された要素にイベント リスナーを直接追加することはできません。代わりに、textarea 要素の onChange 属性を使用して、React の方法でイベントを処理する必要があります。

TEXTAREA_COMPONENT.js

リーリー

APP.js

リーリー

Answer 2

この機能を自分で実装する代わりにライブラリを使用したい場合は、と呼ばれる素晴らしいライブラリがあります。 反応テキストエリア自動サイズ。

自分で実装したい場合でも、このリポジトリをガイドとして使用できます。