简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Questions et réponses  >  le corps du texte

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

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.

P粉697408921P粉697408921276 Il y a quelques jours513

répondre à tous(2)je répondrai

  • P粉949190972

    P粉9491909722024-01-18 00:46:33

    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 (