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

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

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

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

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

基本步骤如下：

1. 将文本域的高度重置为 inherit 或一个较小的值，以确保 scrollHeight 能够准确反映当前内容。
2. 获取文本域的 scrollHeight。
3. 将文本域的高度设置为计算出的 scrollHeight 值。
4. 为了防止用户手动调整大小，通常还需要将 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 将指向实际的 <textarea> DOM 元素。

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

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

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

百度文心百中

百度大模型语义搜索体验中心

22

查看详情

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

1. 安装：

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

   登录后复制

2. 使用示例：

   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 中实现动态调整高度的文本域的详细内容，更多请关注php中文网其它相关文章！