textarea无法随输入内容自动调整尺寸问题求助

我正在创建一个包含textarea的表单，该textarea应支持输入大量文本，并能根据输入文本的内容量自动扩展尺寸，但实际输入文本变化时，它的尺寸并未改变。

我的CSS代码：

.paste-text {
    width: 100%;
    min-height: 400px;
    box-sizing: border-box;
    overflow-y: hidden; /* Hide vertical scrollbar */
    resize: none; /* Disable manual resizing */
    height: auto; /* Automatically adjust height based on content */
}

我的React HTML代码：

<div>
    <form className="paste-form" onSubmit={formik.handleSubmit}>
        <div>
            <textarea
                className="paste-text"
                id="text"
                name="text"
                placeholder="Write here the text of your paste"
                value={formik.values.text}
                onChange={formik.handleChange}
            />
        </div>
        <input type="submit" value="Create paste"/>
    </form>
</div>

错误原因 #

你当前的核心问题是：CSS的height: auto无法让textarea自动根据内容调整高度。textarea属于浏览器的替换元素，它的高度默认由rows属性或浏览器默认值控制，单纯设置height: auto不会触发它随内容动态伸缩的行为。

解决方案 #

方案1：React中用JS动态计算高度（推荐原生textarea场景） #

通过监听内容变化，动态获取textarea的scrollHeight（内容实际高度），再设置元素高度，同时处理内容减少时的高度收缩：

1. 新增内容处理函数：

const handleTextareaChange = (e) => {
  // 先执行Formik的默认处理逻辑
  formik.handleChange(e);
  const textarea = e.target;
  
  // 重置高度为auto，确保内容减少时能收缩
  textarea.style.height = 'auto';
  // 设置为内容实际高度，避免滚动条出现
  textarea.style.height = `${textarea.scrollHeight}px`;
};

2. 调整textarea组件属性：

<textarea
  className="paste-text"
  id="text"
  name="text"
  placeholder="Write here the text of your paste"
  value={formik.values.text}
  onChange={handleTextareaChange}
  // 初始加载时同步一次高度
  onMount={(e) => {
    const textarea = e.target;
    textarea.style.height = `${textarea.scrollHeight}px`;
  }}
/>

3. 简化CSS（移除无效的height: auto）：

.paste-text {
    width: 100%;
    min-height: 400px;
    box-sizing: border-box;
    overflow-y: hidden;
    resize: none;
}

方案2：纯CSS模拟textarea（适合非原生表单场景） #

如果不需要原生textarea的表单提交特性，可以用contenteditable的div模拟，它会自动随内容调整高度：

<div
  className="paste-text"
  contentEditable
  role="textbox"
  aria-multiline="true"
  onInput={(e) => {
    formik.setFieldValue('text', e.target.textContent);
  }}
  dangerouslySetInnerHTML={{ __html: formik.values.text }}
/>

对应的CSS调整（模拟textarea样式）：

.paste-text {
    width: 100%;
    min-height: 400px;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #ccc;
    overflow-wrap: break-word;
    outline: none;
}

内容的提问来源于stack exchange，提问作者Ярослав Пантелеев