Ajouter un écouteur d'événement à un élément textarea spécifique

Question

Je travaille sur un projet dans Next.js13 et j'essaie de créer un composant textarea personnalisé. Je souhaite que ce composant s'ajoute un écouteur d'événements (lui permettant d'ajuster automatiquement sa hauteur au fur et à mesure que l'utilisateur tape). Voici la partie du code pertinente à ce problème :

const textarea = (
    <textarea 
        id={id}
        className={styles.input} 
        {...fieldProps} /> 
);

textarea.addEventListener("input", function(e){
    this.style.height = "auto";
    this.style.height = this.scrollHeight + "px";
})

return (
    {textarea}
)

Ce code génère les erreurs "TypeError : textarea.addEventListener n'est pas une fonction " et "La propriété 'addEventListener' n'existe pas sur le type 'Element'. " < /p>

Comment ajouter cet écouteur d'événement à la zone de texte créée par ce composant ?

Limitations et solutions précédemment essayées

1. Je souhaite que l'utilisateur puisse spécifier un identifiant (mais ce n'est pas obligatoire), donc je ne peux pas utiliser document.getElementById().

2. La réécriture de la ligne addEventListener comme suit élimine le "Property 'addEventListener' n'existe pas sur le type 'Element' ", mais le "TypeError: textarea.addEventListener n'est pas une fonction < /strong>" apparaît toujours :

   (textarea as unknown as HTMLTextAreaElement).addEventListener("input", function(e){
       this.style.height = "auto";
       this.style.height = this.scrollHeight + "px";
   })

3. Utiliser document.getElementsByTag('textarea') puis parcourir en boucle toutes les zones de texte renvoyées et ajouter un écouteur d'événement fonctionne. Cependant, si j'ai plusieurs zones de texte sur une page, cela semble ajouter deux fois l'écouteur d'événement. Disons qu'il y a une zone de texte sur la page qui fait partie d'un composant différent et que je ne souhaite pas y ajouter cet écouteur d'événement.

Answer 1

Dans React, vous ne pouvez pas ajouter d'écouteurs d'événements directement aux éléments créés dans JSX comme vous le pouvez avec JavaScript normal. Au lieu de cela, vous devez gérer les événements à la manière de React en utilisant l'attribut onChange sur l'élément textarea.

TEXTAREA_COMPONENT.js

import React, { useState } from 'react';

const CustomTextarea = ({ id, ...fieldProps }) => {
  const [value, setValue] = useState('');
  const [height, setHeight] = useState('auto');

  const handleChange = (e) => {
    setValue(e.target.value);
    setHeight('auto');
    setHeight(e.target.scrollHeight + 'px');
  };

  return (
    
  );
};

export default CustomTextarea;

APP.js

import React from 'react';
import CustomTextarea from './path/to/CustomTextarea';

const App = () => {
  return (
    

      
      {/* other content */}
    
  );
};

export default App;

Answer 2

Si vous souhaitez utiliser une bibliothèque au lieu d'implémenter cette fonctionnalité vous-même, il existe une excellente bibliothèque appelée react-textarea-autosize.

Si vous souhaitez l'implémenter vous-même, vous pouvez toujours utiliser ce référentiel comme guide.