如何在 React 中实现动态调整高度的文本域_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何在 React 中实现动态调整高度的文本域

2025-10-27

浏览次数：次

返回列表

如何在 react 中实现动态调整高度的文本域

本文详细介绍了在 React 应用中实现文本域（textarea）高度动态调整的方法，着重解决了初始渲染时高度不准确的问题。通过利用 `useRef` 获取 DOM 引用和 `useLayoutEffect` 在浏览器绘制前调整高度，确保了文本域能够根据内容实时且准确地自适应。此外，文章还推荐了使用成熟的第三方库来简化开发并提升健壮性。

在现代 Web 应用中，用户体验至关重要。一个常见的需求是让文本域（textarea）能够根据用户输入的内容自动调整高度，避免出现滚动条，从而提供更流畅的输入体验。然而，在 React 中直接实现这一功能时，开发者常会遇到一个问题：文本域在首次加载或输入第一个字符时，高度调整可能不准确，出现瞬时的跳动或不正确的尺寸。本教程将深入探讨如何优雅地解决这一问题，实现一个功能完善的动态高度文本域。

理解文本域自适应高度的原理

实现文本域自适应高度的核心在于利用 DOM 元素的 scrollHeight 属性。scrollHeight 表示元素内容的总高度，包括由于溢出而不可见的内容。通过将文本域的高度设置为其 scrollHeight，我们可以使其完全显示所有内容。

基本步骤如下：

将文本域的高度重置为 inherit 或一个较小的值，以确保 scrollHeight 能够准确反映当前内容。
获取文本域的 scrollHeight。
将文本域的高度设置为计算出的 scrollHeight 值。
为了防止用户手动调整大小，通常还需要将 CSS 属性 resize 设置为 none。

解决初始渲染时的尺寸问题

许多开发者会尝试在 onChange 事件中调用调整高度的逻辑。虽然这对于后续的输入是有效的，但对于文本域的初始渲染（例如，当它包含默认值时）或在输入第一个字符时，可能会出现高度计算不准确的问题。这是因为在 React 的渲染周期中，DOM 元素的布局可能尚未完全稳定。

为了解决这个问题，我们需要确保在浏览器绘制页面之前，文本域的高度已经被正确计算并设置。这正是 useRef 和 useLayoutEffect 这两个 React Hook 发挥作用的地方。

1. 获取 DOM 元素的引用：useRef

在 React 中，我们通常不直接操作 DOM。但是，对于需要测量或修改特定 DOM 属性（如 scrollHeight）的场景，useRef 提供了一种安全且推荐的方式来获取对底层 DOM 节点的直接引用。

import React, { useLayoutEffect, useRef } from "react";

function App() {
  const textbox = useRef(null); // 创建一个ref对象
  // ...
}

然后，将这个 ref 对象绑定到你的 textarea 元素上：

<textarea
  ref={textbox} // 将ref绑定到textarea
  // ...
/>

现在，textbox.current 将指向实际的 DOM 元素。

2. 在浏览器绘制前调整高度：useLayoutEffect

useLayoutEffect 与 useEffect 类似，但它在所有 DOM 变更完成后、浏览器执行绘制之前同步执行。这意味着任何在 useLayoutEffect 中进行的 DOM 测量和修改都会在用户看到更新之前完成，从而避免了视觉上的闪烁或不一致。

我们可以创建一个辅助函数 adjustHeight 来封装高度调整的逻辑：

小爱开放平台

小米旗下小爱开放平台

291 查看详情小爱开放平台

function App() {
  const textbox = useRef(null);

  function adjustHeight() {
    if (textbox.current) { // 确保ref已关联到DOM元素
      textbox.current.style.height = "inherit"; // 重置高度
      textbox.current.style.height = `${textbox.current.scrollHeight}px`; // 设置为实际内容高度
    }
  }

  // 使用useLayoutEffect在DOM加载后立即调整高度
  useLayoutEffect(adjustHeight, []); // 空数组表示只在组件挂载时运行一次

  // ...
}

将 adjustHeight 函数作为 useLayoutEffect 的回调，并传入一个空依赖数组 []，可以确保它只在组件首次挂载时执行一次，从而解决初始渲染时的高度问题。

3. 实时响应内容变化：onChange 事件

除了初始渲染，我们还需要在用户输入内容时实时调整文本域的高度。这可以通过在 textarea 的 onChange 事件中调用 adjustHeight 函数来实现。

import React, { useLayoutEffect, useRef } from "react";
import "./App.css"; // 假设有App.css文件

function App() {
  const textbox = useRef(null);

  function adjustHeight() {
    if (textbox.current) {
      textbox.current.style.height = "inherit";
      textbox.current.style.height = `${textbox.current.scrollHeight}px`;
    }
  }

  // 确保在组件挂载后立即调整高度
  useLayoutEffect(adjustHeight, []);

  // 当内容变化时，也调整高度
  function handleChange(e) {
    adjustHeight();
  }

  return (
    <div>
      <header
        className="App-header"
        style={{
          display: "flex",
          justifyContent: "center",
          width: "470px",
          backgroundColor: "#fff",
          borderRadius: "5px",
          padding: "25px 25px 30px"
        }}
      >
        <div>
          <textarea
            ref={textbox} // 绑定ref
            onChange={handleChange} // 绑定onChange事件
            style={{
              width: "95%",
              padding: "15px",
              borderRadius: "5px",
              outline: "none",
              resize: "none" // 禁用用户手动调整大小
            }}
          />
        </div>
      </header>
    </div>
  );
}

export default App;

通过上述代码，我们实现了一个健壮的动态高度文本域。useLayoutEffect 确保了初始渲染的准确性，而 onChange 事件则保证了后续输入时的实时响应。

推荐方案：使用第三方库

虽然手动实现动态高度文本域是可行的，但在实际生产环境中，考虑到各种边缘情况（如不同浏览器兼容性、CSS box-sizing 属性的影响、滚动条宽度等），使用一个成熟的第三方库通常是更明智的选择。这些库经过了广泛测试和优化，能够处理许多我们可能忽略的细节。

一个非常流行的 React 动态文本域库是 react-textarea-autosize。它提供了简洁的 API，并且性能良好。

使用 react-textarea-autosize

安装：

npm install react-textarea-autosize
# 或
yarn add react-textarea-autosize

使用示例：

import React from 'react';
import TextareaAutosize from 'react-textarea-autosize';

function App() {
  return (
    <div>
      <header
        className="App-header"
        style={{
          display: "flex",
          justifyContent: "center",
          width: "470px",
          backgroundColor: "#fff",
          borderRadius: "5px",
          padding: "25px 25px 30px"
        }}
      >
        <div>
          <TextareaAutosize
            minRows={3} // 最小行数
            maxRows={10} // 最大行数 (可选)
            style={{
              width: "95%",
              padding: "15px",
              borderRadius: "5px",
              outline: "none",
              resize: "none"
            }}
            placeholder="请输入内容..."
          />
        </div>
      </header>
    </div>
  );
}

export default App;

使用 TextareaAutosize 组件，你只需像使用普通 textarea 一样传入 props，它会自动处理高度调整逻辑。它还提供了 minRows 和 maxRows 等实用 prop 来控制文本域的最小和最大高度。

总结

在 React 中实现动态调整高度的文本域，关键在于理解 scrollHeight 的工作原理，并结合 React 的 useRef 和 useLayoutEffect Hooks 来精确控制 DOM 元素的尺寸。useRef 提供了对 DOM 元素的直接访问，而 useLayoutEffect 则确保了在浏览器绘制前完成所有必要的 DOM 测量和更新，从而解决了初始渲染时的尺寸不准确问题。对于更复杂或生产级的应用，强烈推荐使用如 react-textarea-autosize 这样的成熟第三方库，以简化开发、提高代码质量和处理各种边缘情况。

以上就是如何在 React 中实现动态调整高度的文本域的详细内容，更多请关注其它相关文章！

# 第一个 # 颍上县网站排名优化公司 # 网站建设简单流程表 # 南海勒流网站建设 # 外贸营销网站推广文案模板 # 杭州网站推广优化价格表 # 福州抖音seo参数调整 # 容桂网站建设流程 # 通辽seo公司选择16火星 # 营销工具宝贝推广在哪里 # 温州谷歌seo品牌公司 # 自适应 # 首次 # css # 这一 # 设置为 # 不准确 # 绑定 # 表单 # 第三方 # 小爱 # app # 浏览器 # npm # react

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：前端框架中的J*aScript状态管理

下一篇：J*aScript实现多文本复制功能：解决多个按钮的剪贴板操作问题

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们