React实现光标到达textarea末行时自动增大尺寸的方法

实现思路 #

基于你找到的原生JS方案，适配React组件逻辑：通过监听textarea的输入相关事件，动态计算元素的scrollHeight调整高度，同时保留最小/最大高度限制，确保右下角按钮始终可见。

React完整实现代码 #

/* 可单独抽离到CSS文件，或使用内联样式 */
.auto-resize-textarea {
  width: 100%;
  min-height: 80px;
  max-height: 200px;
  overflow: auto;
  resize: vertical;
  padding: 8px; /* 根据需求设置内边距，scrollHeight会自动包含此值 */
}

.textarea-container {
  position: relative;
}

.textarea-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 10;
}

import { useRef, useEffect } from 'react';

export default function AutoResizeTextarea() {
  const textareaRef = useRef(null);

  // 自动调整高度核心函数
  const autosize = () => {
    const textarea = textareaRef.current;
    if (!textarea) return;
    
    // 重置高度以获取真实scrollHeight
    textarea.style.height = 'auto';
    // 设置高度为scrollHeight，不超过maxHeight限制
    textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
  };

  useEffect(() => {
    const textarea = textareaRef.current;
    if (!textarea) return;

    // 初始化时设置一次高度
    autosize();

    // 绑定事件：覆盖键盘输入、粘贴、拖拽等所有内容变更场景
    textarea.addEventListener('keydown', autosize);
    textarea.addEventListener('input', autosize);

    // 组件卸载时移除监听
    return () => {
      textarea.removeEventListener('keydown', autosize);
      textarea.removeEventListener('input', autosize);
    };
  }, []);

  return (
    <div className="textarea-container">
      <textarea
        ref={textareaRef}
        className="auto-resize-textarea"
        placeholder="请输入内容..."
      />
      <button className="textarea-btn">提交</button>
    </div>
  );
}

关键细节说明 #

1. Ref获取DOM节点：通过useRef直接拿到textarea的真实DOM元素，方便操作样式。
2. 多事件监听：同时绑定keydown和input事件，确保所有内容变更场景都能触发高度调整。
3. 高度限制：用Math.min限制高度不超过maxHeight，超过后自动显示滚动条。
4. 按钮层级：通过绝对定位和z-index确保按钮始终在textarea上方，不会被内容覆盖。
5. 内边距处理：保留textarea的内边距设置，scrollHeight会自动包含内边距高度，无需额外计算。

内容的提问来源于stack exchange，提问作者Mohit Chauhan