将事件侦听器添加到特定的文本区域元素-PHP中文网问答

我正在 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') 然后循环所有返回的文本区域并添加事件侦听器确实有效。但是，如果我在一个页面上有多个文本区域，这似乎会添加事件侦听器两次。假设页面上有一个文本区域，它是不同组件的一部分，我不希望将此事件侦听器添加到其中。

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;

全部回复(2)

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

在 React 中，您无法像使用普通 JavaScript 那样直接向在 JSX 中创建的元素添加事件侦听器。相反，您应该通过在 textarea 元素上使用 onChange 属性来使用 React 方式处理事件。

TEXTAREA_COMPONENT.js

APP.js

import React from 'react';
import CustomTextarea from './path/to/CustomTextarea';

const App = () => {
  return (
    
      
      {/* other content */}
    
  );
};

export default App;

赞 +0

添加回复

P粉9201997612024-01-18 00:35:54 1楼

如果您愿意使用库而不是自己实现此功能，那么有一个很棒的库，称为 react-textarea-autosize。

如果您想自己实现，您仍然可以使用此存储库作为指南。