MERN栈应用中如何让textarea高度随内容自适应？

看起来你遇到的核心问题有几个：原生JavaScript代码的执行时机不对、循环逻辑有错误，再加上React的DOM渲染机制和原生JS操作的冲突，导致你的自适应逻辑没生效。我来一步步帮你拆解和解决：

问题分析 #

1. 循环越界错误：你的for循环条件写了i < tx.length + 1，这会导致最后一次循环时tx[i]是undefined（类数组的索引范围是0到length-1），调用setAttribute会直接报错，后续的事件监听代码根本没机会执行。
2. DOM渲染时机不匹配：main.js在页面加载时就执行了，但此时React还没把textarea组件渲染到DOM里，document.getElementsByClassName返回的是空数组，自然没法给元素加监听。
3. 事件类型选得不对：你用了change事件，这个事件只有在textarea失去焦点时才触发，而我们需要实时响应输入变化，应该用input事件。
4. React合成事件冲突：React内部用的是合成事件系统，就算你成功加了原生事件监听，组件重新渲染时DOM元素可能被替换，监听也会失效。

推荐方案：在React组件内实现自适应（符合MERN栈范式） #

最稳妥的方式是直接在React组件里处理，不用依赖外部main.js，完美适配React的渲染机制：

import { useState, useRef, useEffect } from 'react';

function CommentInput() {
  const [text, setText] = useState('');
  // 创建ref关联textarea DOM元素
  const textareaRef = useRef(null);

  // 初始化textarea高度
  useEffect(() => {
    const textarea = textareaRef.current;
    if (textarea) {
      textarea.style.height = 'auto';
      textarea.style.height = `${textarea.scrollHeight}px`;
    }
  }, []);

  // 处理输入变化同时调整高度
  const handleInputChange = (e) => {
    const newValue = e.target.value;
    setText(newValue);
    
    const textarea = textareaRef.current;
    if (textarea) {
      // 先重置高度为auto，再计算真实滚动高度
      textarea.style.height = 'auto';
      textarea.style.height = `${textarea.scrollHeight}px`;
    }
  };

  return (
    <textarea
      ref={textareaRef}
      className='comment-area-responsive'
      name='title'
      placeholder='What do you think?'
      value={text}
      onChange={handleInputChange}
      required
      style={{ overflowY: 'hidden' }}
    />
  );
}

export default CommentInput;

如果你坚持用原生JavaScript实现 #

如果一定要依赖外部main.js，需要确保在React渲染完成后再执行代码，同时修正循环和事件类型问题：

// main.js
document.addEventListener('DOMContentLoaded', () => {
  // 用MutationObserver监听root元素变化，确保textarea渲染完成后再操作
  const rootElement = document.getElementById('root');
  const observer = new MutationObserver((mutations) => {
    const textareas = document.getElementsByClassName('comment-area-responsive');
    if (textareas.length > 0) {
      observer.disconnect(); // 找到目标后停止监听
      
      for (let i = 0; i < textareas.length; i++) {
        const tx = textareas[i];
        // 初始化高度
        tx.style.height = `${tx.scrollHeight}px`;
        tx.style.overflowY = 'hidden';
        // 绑定input事件实时响应输入
        tx.addEventListener('input', adjustTextareaHeight, false);
      }
    }
  });

  observer.observe(rootElement, {
    childList: true,
    subtree: true
  });
});

function adjustTextareaHeight() {
  this.style.height = 'auto';
  this.style.height = `${this.scrollHeight}px`;
}

关键说明 #

• 为什么用input事件？它会在用户输入、粘贴、删除内容时实时触发，完美匹配高度自适应的需求，而change事件只有在元素失去焦点时才触发，体验很差。
• React组件内的方式更推荐：它遵循React的组件化思想，避免了原生DOM操作和React渲染机制的冲突，代码也更易维护。

内容的提问来源于stack exchange，提问作者Kittichote Chain