如何让 shadcn Textarea 自适应高度？
shadcn Textarea 是一款非常受欢迎的 React 组件，它提供了美观且易于使用的文本区域。但有时您可能希望 Textarea 的高度能够根据输入内容自适应变化。以下是如何实现这一目标：
1. 使用 CSS 自适应高度
最简单的方法是使用 CSS 的 min-height 和 max-height 属性来设置 Textarea 的高度范围。
textarea {
min-height: 50px; /* 设置最小高度 */
max-height: 200px; /* 设置最大高度 */
resize: vertical; /* 允许垂直调整大小 */
}
这个例子设置了 Textarea 的最小高度为 50px，最大高度为 200px。用户可以垂直调整 Textarea 的大小，但它不会超过 200px。
2. 使用 JavaScript 自适应高度
如果您需要更精确的控制，可以使用 JavaScript 来动态调整 Textarea 的高度。以下是一个简单的示例：
const textarea = document.querySelector('textarea');
textarea.addEventListener('input', () => {
textarea.style.height = 'auto';
textarea.style.height = textarea.scrollHeight + 'px';
});
这个代码片段监听 Textarea 的 input 事件，当用户输入内容时，会自动调整 Textarea 的高度。它首先将 height 属性设置为 auto，然后将 height 设置为 scrollHeight，这样 Textarea 的高度就能够完全包含输入内容。
3. 使用 shadcn 提供的 autosize 属性
shadcn Textarea 自身提供了一个 autosize 属性，可以方便地实现自适应高度。
import { Textarea } from 'shadcn-react';
function MyComponent() {
return (
);
}
使用 autosize 属性会自动启用自适应高度功能，不需要您手动设置 CSS 或 JavaScript 代码。
4. 考虑使用第三方库
如果您需要更高级的自适应高度功能，例如支持滚动条或自动换行，可以考虑使用第三方库，例如 react-textarea-autosize。
5. 注意细节
- 使用
min-height和max-height设置 Textarea 的高度范围可以防止 Textarea 过高或过低。 - 使用 JavaScript 动态调整高度时，需要注意性能问题。如果您的 Textarea 非常大，可能需要优化代码以避免性能瓶颈。
- 确保您的 CSS 和 JavaScript 代码正确地与 shadcn Textarea 组件结合使用。
结论
通过以上几种方法，您可以轻松地实现 shadcn Textarea 的自适应高度功能，根据输入内容动态调整 Textarea 的高度。选择最适合您的方法，并根据实际需求进行调整。