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

Question

我正在 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') 然後循環所有返回的文字區域並添加事件偵聽器確實有效。但是，如果我在一個頁面上有多個文字區域，這似乎會添加事件偵聽器兩次。假設頁面上有一個文字區域，它是不同元件的一部分，我不希望將此事件偵聽器新增到其中。

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。

如果您想自己實現，您仍然可以使用此儲存庫作為指南。