# Textarea

多行文本输入框，支持字数统计与高度自适应。

## 适用场景

- 表单中需要输入多行文字的场景，如描述、备注、评论
- 需要实时显示已输入字数与上限的场景
- 需要根据内容自动伸缩高度的场景

## Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| value | `string` | `-` | 否 | 输入值 |
| defaultValue | `string` | `""` | 否 | 默认值 |
| size | `BaseSize` | `-` | 否 | 尺寸，默认使用 config context 的 `baseSize` |
| disabled | `boolean` | `-` | 否 | 是否禁用 |
| readOnly | `boolean` | `-` | 否 | 是否只读 |
| status | `"normal" \| "error"` | `"normal"` | 否 | 文本框状态 |
| hint | `ReactNode` | `-` | 否 | 提示内容，基本样式会跟随 status |
| rows | `number` | `3` | 否 | 行数 |
| minRows | `number` | `-` | 否 | 最小行数，设置后即启用高度自适应 |
| maxRows | `number` | `-` | 否 | 最大行数 |
| maxLength | `number` | `-` | 否 | 最大输入长度，仅做字数提示，不截断 |
| textCounter | `(value: string) => number` | `-` | 否 | 字数计数函数 |
| onChange | `(e: ChangeEvent<HTMLTextAreaElement>) => void` | `-` | 否 | 值变化时的回调 |

## 典型用法

### 基础用法（含字数统计与状态）

> `status` 支持 `'normal'` | `'error'`

```tsx
import { useState } from 'react'
import { Textarea, TextareaProps } from '@befe/brick'

const [value, setValue] = useState('')
const handleChange: TextareaProps['onChange'] = e => setValue(e.target.value)

// 受控，带字数统计
<Textarea value={value} onChange={handleChange} placeholder="请输入描述" maxLength={100} />

// 超出限制提示
<Textarea defaultValue="overflow" maxLength={5} />

// 错误状态
<Textarea defaultValue="invalid" maxLength={10} status="error" />

// 禁用
<Textarea defaultValue="这是一段描述" disabled />
```

### 尺寸

```tsx
<Textarea size="sm" placeholder="sm" rows={2} />
<Textarea size="md" placeholder="md" rows={2} />
```

### 高度自适应

> 通过设置 `minRows` 启用高度自适应

```tsx
const [value, setValue] = useState('')

// 最小 1 行，最大 7 行
<Textarea
    value={value}
    onChange={e => setValue(e.target.value)}
    maxLength={100}
    minRows={1}
    maxRows={7}
/>

// 仅设置最小行数
<Textarea maxLength={5} minRows={4} />
```

## 注意事项

- `maxLength` 仅做字数提示，**不会截断输入内容**；需要截断时，须通过受控 `value` + `onChange` 自行处理
- 设置 `minRows` 即启用高度自适应模式，组件会在 `minRows` 到 `maxRows` 范围内自动伸缩
- `readOnly` 与 `disabled` 样式一致，推荐总是使用 `disabled` 替代 `readOnly`
- 中文拼音输入场景下截断易误删未完成的拼写；复制粘贴场景下末尾字符往往不是用户希望删除的内容，因此组件默认不截断