如何在ReactJS中自动调整textarea元素的高度？

步骤1：创建自定义Hook文件 #

在项目中新建useAutoSizeTextArea.ts文件，代码如下：

import { useLayoutEffect } from "react";

const useAutoSizeTextArea = (id: string, textAreaRef: HTMLTextAreaElement | null, value: string) => {
  // 在DOM绘制前计算textarea高度，避免布局抖动
  useLayoutEffect(() => {
    // 优先使用传入的ref，无ref则通过id获取元素
    const textArea = textAreaRef ? textAreaRef : document.getElementById(id);
    
    if (textArea) {
      // 暂时重置高度为0，确保能获取内容真实的scrollHeight
      textArea.style.height = "0px";
      const scrollHeight = textArea.scrollHeight;
      // 设置高度为内容滚动高度，实现自适应
      textArea.style.height = scrollHeight + "px";
    }
  }, [textAreaRef, id, value]); // 依赖项变化时重新计算高度
};

export default useAutoSizeTextArea;

步骤2：在目标组件中使用Hook #

在需要自适应高度textarea的组件中导入并使用该Hook：

import React, { useState, useRef } from "react";
import useAutoSizeTextArea from "./useAutoSizeTextArea";

const App = (props: any) => {
  // 维护textarea输入值状态
  const [value, setValue] = useState("");
  // 创建textarea的ref
  const textAreaRef = useRef<HTMLTextAreaElement>(null);

  // 调用自适应Hook，传入textarea的id、ref和当前值
  useAutoSizeTextArea("txtTPA", textAreaRef.current, value);

  return (
    <textarea
      id="txtTPA"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      ref={textAreaRef}
    ></textarea>
  );
};

export default App;

步骤3：添加基础样式 #

给textarea添加以下CSS样式，隐藏滚动条并设置最小高度：

#txtTPA {
  resize: none; /* 禁止手动调整大小 */
  overflow: hidden; /* 隐藏滚动条 */
  min-height: 110px; /* 设置最小高度，避免内容为空时高度过小 */
}

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