我正在 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>
如何將此事件偵聽器新增至此元件所建立的文字區域？
我希望使用者能夠指定 id（但不要求這樣做），因此我無法使用 document.getElementById()。
以以下方式重寫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";
})
使用 document.getElementsByTag('textarea') 然後循環所有返回的文字區域並添加事件偵聽器確實有效。但是，如果我在一個頁面上有多個文字區域，這似乎會添加事件偵聽器兩次。假設頁面上有一個文字區域，它是不同元件的一部分，我不希望將此事件偵聽器新增到其中。
在 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 (
);
};
export default App;如果您願意使用庫而不是自己實現此功能，那麼有一個很棒的庫，稱為 react-textarea-autosize。
如果您想自己實現，您仍然可以使用此儲存庫作為指南。