本教程探讨如何在react中实现`textarea`内容的动态高度调整。我们将解决常见的问题，即`textarea`在输入首字符时出现的不自然跳动，通过结合使用`useref`和`uselayouteffect`钩子，确保其在组件挂载时和内容变化时都能平滑地根据内容自动调整高度。此外，文章还将推荐使用成熟的第三方库，以提供更健壮和免维护的解决方案。
在构建现代Web应用时，我们经常需要textarea组件能够根据其内容自动调整高度，以提供更好的用户体验。然而，直接在React中实现这一功能时，开发者可能会遇到一个常见的问题：textarea在用户输入第一个字符时会发生一次不自然的尺寸跳动，随后才正常工作。本文将深入探讨这一问题的原因，并提供一个基于React Hooks的解决方案，同时推荐使用第三方库来简化开发。
理解动态调整textarea高度的挑战
textarea元素的高度通常由CSS的height属性或rows属性决定。要实现动态调整，我们需要在内容变化时获取其实际可滚动的高度（scrollHeight），并将其应用到元素的height样式上。
一个常见的初步尝试是在onChange或onKeyDown事件处理器中执行以下逻辑：
function handleInput(e) {
e.target.style.height = 'inherit'; // 重置高度以获取准确的scrollHeight
e.target.style.height = `${e.target.scrollHeight}px`; // 设置为实际滚动高度
}
// ... 在JSX中
<textarea onChange={handleInput} style={{ resize: 'none' }} />这种方法在用户持续输入时通常能正常工作。然而，当组件首次渲染时，textarea可能已经包含一些初始内容（例如来自value prop），或者其默认高度不足以容纳内容。此时，onChange事件只会在用户首次输入时触发，导致在输入第一个字符之前，textarea的高度是固定的，而输入第一个字符后才进行调整，从而产生不自然的跳动。
解决方案：结合useRef和useLayoutEffect
为了解决上述初始渲染时的高度问题，我们需要确保在组件挂载后立即执行一次高度调整。React的useRef和useLayoutEffect钩子是实现这一目标的理想工具。
useRef获取DOM引用：useRef允许我们创建一个可变的引用，该引用在组件的整个生命周期中保持不变。我们可以将这个引用附加到textarea元素上，以便直接访问其底层的DOM节点。
useLayoutEffect进行初始调整：useLayoutEffect钩子在DOM更新后、浏览器绘制之前同步执行。这使得它非常适合执行需要测量DOM布局的操作，例如获取scrollHeight并设置元素高度。通过传入一个空的依赖数组[]，我们可以确保它只在组件首次挂载时执行一次。
封装调整逻辑： 将高度调整的逻辑封装在一个独立的函数中，以便在useLayoutEffect和onChange事件中复用。
下面是实现动态调整textarea高度的完整代码示例：
import React, { useLayoutEffect, useRef } from "react";
function App() {
// 1. 使用useRef创建对textarea元素的引用
const textbox = useRef(null);
// 封装调整高度的逻辑
const adjustHeight = () => {
if (textbox.current) {
textbox.current.style.height = "inherit"; // 重置高度
// 确保在重置后能够正确计算scrollHeight
// 这里使用setTimeout或requestAnimationFrame可以确保DOM重绘，但对于大多数情况，直接设置即可
textbox.current.style.height = `${textbox.current.scrollHeight}px`;
}
};
// 2. 使用useLayoutEffect在组件挂载后立即调整高度
// 空依赖数组确保只运行一次，处理初始渲染
useLayoutEffect(adjustHeight, []);
// 3. onChange事件中调用调整高度函数
const handleInput = (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附加到textarea元素
onChange={handleInput}
style={{
width: "95%",
padding: "15px",
borderRadius: "5px",
outline: "none",
resize: "none" // 禁用用户手动调整大小
}}
/>
</div>
</header>
</div>
);
}
export default App;代码解析：
- useRef(null) 初始化了一个引用，并将其赋值给textbox。
- textbox.current 将指向实际的textarea DOM元素。
- adjustHeight 函数负责执行高度调整的核心逻辑。
- useLayoutEffect(adjustHeight, []) 确保在组件首次渲染并挂载到DOM后，adjustHeight会被调用一次，从而解决初始内容的高度问题。
- onChange={handleInput} 确保用户输入内容时，adjustHeight函数也会被调用，从而实现实时的高度调整。
- resize: 'none' 是一个重要的CSS属性，它禁用了textarea右下角的用户拖拽调整大小的功能，避免与我们的动态调整逻辑冲突。
推荐方案：使用第三方库
尽管上述自定义钩子方案是有效的，但在实际项目中，为了代码的健壮性、维护性和对各种边缘情况（如字体加载、CSS动画、多语言文本等）的兼容性，强烈建议使用成熟的第三方库。
一个广受欢迎的库是 react-textarea-autosize。它封装了复杂的逻辑，提供了简洁的API，并且通常比手动实现更加稳定和高效。
使用 react-textarea-autosize 的步骤：
-
安装：
npm install react-textarea-autosize # 或 yarn add react-textarea-autosize
-
使用： 只需将你的textarea替换为 TextareaAutosize 组件即可。
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" }} /> </div> </header> </div> ); } export default App;TextareaAutosize组件会自动处理高度调整逻辑，包括初始渲染和内容变化。它还提供了minRows和maxRows等方便的属性来控制高度的上下限。
总结与注意事项
- 问题根源： textarea在React中动态调整高度时，初次渲染或加载带有初始内容时，如果没有在DOM挂载后立即调整高度，会导致首次输入时出现跳动。
- 自定义解决方案： 利用useRef获取DOM元素引用，并结合useLayoutEffect在DOM更新后同步调整高度，解决了初始渲染问题。onChange事件则负责后续的用户输入调整。
- 最佳实践： 对于生产环境应用，优先考虑使用像 react-textarea-autosize 这样的成熟第三方库。它们通常经过了充分的测试，处理了更多边缘情况，并提供了更丰富的配置选项。
- CSS resize: 'none'： 无论采用哪种方法，都应在textarea的样式中添加 resize: 'none'，以禁用浏览器原生的手动调整功能，确保用户体验的一致性。
通过以上方法，你可以在React应用中实现一个流畅、无跳动的textarea动态高度调整功能，显著提升用户交互体验。
