Tambahkan pendengar acara pada elemen textarea tertentu

Question

Saya sedang mengusahakan projek dalam Next.js13 dan saya cuba mencipta komponen textarea tersuai. Saya mahu komponen ini menambah pendengar acara kepada dirinya sendiri (membenarkan ia melaraskan ketinggiannya secara automatik mengikut jenis pengguna). Berikut ialah bahagian kod yang berkaitan dengan isu ini:

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

Kod ini menjana ralat "TypeError: textarea.addEventListener bukan fungsi " dan "Property 'addEventListener' tidak wujud pada jenis 'Element'. " < /p>

Bagaimana untuk menambah pendengar acara ini pada kawasan teks yang dibuat oleh komponen ini?

Keterbatasan dan penyelesaian yang telah dicuba sebelum ini

1. Saya mahu pengguna dapat menentukan id (tetapi tidak perlu berbuat demikian), jadi saya tidak boleh menggunakan document.getElementById().

2. Menulis semula baris addEventListener seperti berikut menghapuskan "Property 'addEventListener' tidak wujud pada jenis 'Element' ", tetapi "TypeError: textarea.addEventListener bukan fungsi < /strong>" masih muncul:

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

3. Menggunakan document.getElementsByTag('textarea') dan kemudian menggelung pada semua kawasan teks yang dikembalikan dan menambahkan pendengar acara berfungsi. Walau bagaimanapun, jika saya mempunyai berbilang kawasan teks pada halaman, ini nampaknya menambah pendengar acara dua kali. Katakan terdapat kawasan teks pada halaman yang merupakan sebahagian daripada komponen yang berbeza dan saya tidak mahu menambah pendengar acara ini kepadanya.

Answer 1

Dalam React, anda tidak boleh menambah pendengar acara secara langsung pada elemen yang dibuat dalam JSX seperti yang anda boleh lakukan dengan JavaScript biasa. Sebaliknya, anda harus mengendalikan acara dengan cara React dengan menggunakan atribut onChange pada elemen 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

Jika anda sanggup menggunakan perpustakaan dan bukannya melaksanakan fungsi ini sendiri, terdapat perpustakaan hebat yang dipanggil react-textarea-autosize.

Jika anda ingin melaksanakannya sendiri, anda masih boleh menggunakan repositori ini sebagai panduan.