我正在 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。
如果您想自己实现，您仍然可以使用此存储库作为指南。