Fügen Sie einen Ereignis-Listener zu einem bestimmten Textbereichselement hinzu

Question

Ich arbeite an einem Projekt in Next.js13 und versuche, eine benutzerdefinierte Textbereichskomponente zu erstellen. Ich möchte, dass diese Komponente sich selbst einen Ereignis-Listener hinzufügt (der es ihr ermöglicht, ihre Höhe automatisch anzupassen, wenn der Benutzer tippt). Hier ist der Teil des Codes, der für dieses Problem relevant ist:

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}
)

Dieser Code generiert die Fehler „TypeError: textarea.addEventListener ist keine Funktion “ und „Property ‚addEventListener‘ existiert nicht für Typ ‚Element‘. “ < /p>

Wie füge ich diesen Ereignis-Listener zum von dieser Komponente erstellten Textbereich hinzu?

Einschränkungen und bisher erprobte Lösungen

1. Ich möchte, dass der Benutzer eine ID angeben kann (aber nicht dazu verpflichtet ist), daher kann ich document.getElementById() nicht verwenden.

2. Durch das Umschreiben der addEventListener-Zeile wie folgt wird die Meldung „Property 'addEventListener' existiert nicht für Typ 'Element' “ entfernt, aber die Meldung „TypeError: textarea.addEventListener ist keine Funktion < /strong>“ erscheint weiterhin:

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

3. Die Verwendung von document.getElementsByTag('textarea') und das anschließende Durchlaufen aller zurückgegebenen Textbereiche und das Hinzufügen eines Ereignis-Listeners funktioniert. Wenn ich jedoch mehrere Textbereiche auf einer Seite habe, scheint der Ereignis-Listener dadurch zweimal hinzugefügt zu werden. Nehmen wir an, es gibt einen Textbereich auf der Seite, der Teil einer anderen Komponente ist, und ich möchte diesen Ereignis-Listener nicht hinzufügen.

Answer 1

在 React 中，您无法像使用普通 JavaScript 那样直接向在 JSX 中创建的元素添加事件侦听器。相反，您应该通过在 textarea 元素上使用 onChange 属性来使用 React 方式处理事件。

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

如果您愿意使用库而不是自己实现此功能，那么有一个很棒的库，称为 react-textarea-autosize。

如果您想自己实现，您仍然可以使用此存储库作为指南。