React文本框含初始值时无法自动适配高度问题修复咨询

你的代码仅在用户输入（onInput）时调整textarea高度，但组件初始化渲染时，即便存在初始值也不会触发高度调整逻辑，导致高度停留在默认的1行。以下是修复方案：

修复步骤 #

1. 封装高度调整逻辑为独立函数，先将高度重置为auto再设置为scrollHeight，解决内容减少时高度无法收缩的问题
2. 使用useEffect钩子，在组件挂载后和value变化时自动触发高度调整，覆盖初始值渲染和后续内容更新场景

修复后的完整代码 #

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

import "./styles.css";

export default function App() {
  // 示例初始多行文本
  const [value, setValue] = useState("这是初始的多行文本\n第二行内容\n第三行内容");
  const textAreaRef = useRef<HTMLTextAreaElement>(null);

  const handleChange = (evt) => {
    const val = evt.target?.value;
    setValue(val);
  };

  const adjustTextareaHeight = () => {
    if (!textAreaRef.current) return;
    // 先重置高度为auto，确保scrollHeight能正确计算当前内容高度
    textAreaRef.current.style.height = "auto";
    textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
  };

  // 组件挂载时和value变化时自动调整高度
  useEffect(() => {
    adjustTextareaHeight();
  }, [value]);

  return (
    <div className="App">
      <label htmlFor="review-text">Review:</label>
      <textarea
        id="review-text"
        onChange={handleChange}
        onInput={adjustTextareaHeight}
        ref={textAreaRef}
        rows={1}
        value={value}
        style={{ resize: "none" }} // 可选：禁止手动调整textarea大小
      />
    </div>
  );
}

关键说明 #

• adjustTextareaHeight函数：先将高度设为auto，让浏览器重新计算内容的scrollHeight，再设置为该值，确保内容增减时高度都能自适应
• useEffect依赖value：既处理初始值渲染后的高度调整，也覆盖后续内容更新时的高度适配
• 统一onInput回调：复用高度调整函数，保持逻辑一致性

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