搜尋

首頁  >  問答  >  主體

將事件偵聽器新增至特定的文字區域元素

我正在 Next.js13 中的一個專案上工作，我正在嘗試建立自訂文字區域元件。我希望這個元件為其自身添加一個事件偵聽器（允許在使用者鍵入時自動調整其高度）。這是與此問題相關的程式碼部分：

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

此程式碼產生錯誤「TypeError：textarea.addEventListener 不是函數」和「類型「Element」上不存在屬性「addEventListener」。」< /p>

如何將此事件偵聽器新增至此元件所建立的文字區域？

限制和之前嘗試的解決方案

  1. 我希望使用者能夠指定 id（但不要求這樣做），因此我無法使用 document.getElementById()。

  2. 以以下方式重寫addEventListener 行可消除“類型“Element”上不存在屬性“addEventListener””，但會出現“TypeError: textarea.addEventListener 不是函數< /strong>」仍然是：

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

  3. 使用 document.getElementsByTag('textarea') 然後循環所有返回的文字區域並添加事件偵聽器確實有效。但是，如果我在一個頁面上有多個文字區域，這似乎會添加事件偵聽器兩次。假設頁面上有一個文字區域，它是不同元件的一部分，我不希望將此事件偵聽器新增到其中。

P粉697408921P粉697408921369 天前589

全部回覆(2)我來回復

  • P粉949190972

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

    在 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 (