文本框 TextArea

基于原生 <textarea> 扩展的高级封装组件，支持自动高度调整（autoSize）、字数统计（showCount）等常用功能。

---

📦 引入方式

import { TextArea } from '@npmqg/react-ui-core';

---

🧩 使用示例

示例

源码

<TextArea placeholder="请输入内容" />

📚 自动高度调整（autoSize）

示例

源码

<TextArea placeholder="自动调节高度" autoSize={{ minRows: 2, maxRows: 6 }} />

• minRows：最小显示行数，默认 1
• maxRows：最大显示行数，默认无限制 组件会根据内容实时自动调整 textarea 的高度，避免出现滚动条。

📚 字数统计（showCount）

示例

0 / 100

源码

<TextArea placeholder="限制最多输入 100 字" maxLength={100} showCount />

📚 受控组件完整代码

const [content, setContent] = React.useState("");

return (
  <TextArea
    value={content}
    onChange={(e) => setContent(e.target.value)}
    placeholder="受控输入框"
    autoSize={{ minRows: 2, maxRows: 8 }}
    showCount
    maxLength={200}
  />
);

---

🧩 Props

属性	类型	默认值	描述
autoSize	{ minRows?: number; maxRows?: number }	—	自动调整高度的最小/最大行数
showCount	boolean	false	是否展示字数统计
maxLength	number	—	限制最大输入长度，配合 showCount 更有用
value	string | number	—	文本域当前值
onChange	(e: React.ChangeEvent<HTMLTextAreaElement>) => void	—	输入变更回调
...props	React.TextareaHTMLAttributes<HTMLTextAreaElement>	—	继承原生 <textarea> 的所有属性

---

📌 注意事项

• 如果你传入了 value，请确保同时使用 onChange 实现受控组件
• autoSize 仅在 value 或 onChange 中触发时生效（即受控模式）