搜索

首页  >  问答  >  正文

将事件侦听器添加到特定的文本区域元素

我正在 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粉697408921400 天前615

全部回复(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 (