简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Soal Jawab  >  teks badan

Tambahkan pendengar acara pada elemen textarea tertentu

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.

P粉697408921P粉697408921275 hari yang lalu512

membalas semua(2)saya akan balas

  • P粉949190972

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

    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 (