# TextArea 组件使用示例

以下为片段，实际页面请自行布局。

---

## 基础文本框

```tsx
import { TextArea } from '@alipay/agentic-design-mobile';

export function BasicTextArea() {
  return (
    <TextArea
      placeholder="有什么想问我的吗～"
      onChange={(value) => {
        console.log(value);
      }}
    />
  );
}
```

---

## 带功能列表的文本框

```tsx
import { TextArea } from '@alipay/agentic-design-mobile';

export function TextAreaWithFunctions() {
  return (
    <TextArea
      allowFunction={{
        functions: true,
        onChange: (value) => {
          console.log(value);
        },
      }}
      placeholder="有什么想问我的吗～"
    />
  );
}
```

---

## 带附件上传的文本框

```tsx
import { useState } from 'react';
import { TextArea } from '@alipay/agentic-design-mobile';

export function TextAreaWithAffix() {
  const [files, setFiles] = useState<File[]>([]);
  return (
    <TextArea
      allowFunction={{
        functions: true,
        onChange: (value) => {
          console.log(value);
        },
      }}
      allowAffix={{
        value: files,
        affix: true,
        onChange: (value) => {
          setFiles(value);
        },
        onFilePreview: (file) => {
          console.log(file);
        },
      }}
      placeholder="有什么想问我的吗～"
      onChange={(value) => {
        console.log(value);
      }}
    />
  );
}
```

---

## 带音频输入的文本框

```tsx
import { TextArea } from '@alipay/agentic-design-mobile';

export function TextAreaWithAudio() {
  return (
    <TextArea
      allowAudio={{
        onChange: (blob, type) => {
          console.log(blob, type);
        },
      }}
      placeholder="有什么想问我的吗～"
    />
  );
}
```

---

## 搜索模式

```tsx
import { useState } from 'react';
import { TextArea } from '@alipay/agentic-design-mobile';

export function TextAreaSearch() {
  const [value, setValue] = useState<string>();
  return (
    <TextArea
      search
      placeholder="有什么想问我的吗～"
      onSearch={() => {
        setValue('');
      }}
      value={value}
      onChange={(v) => {
        console.log('value', v);
        setValue(v);
      }}
    />
  );
}
```

---

## 搜索模式+可取消

```tsx
import { useState } from 'react';
import { TextArea } from '@alipay/agentic-design-mobile';

export function TextAreaSearchLoading() {
  const [loading, setLoading] = useState(false);
  return (
    <TextArea
      search
      loading={loading}
      placeholder="有什么想问我的吗～"
      onSearch={(value) => {
        console.log(value);
        setLoading(true);
      }}
      onPauseLoading={() => {
        setLoading(false);
      }}
    />
  );
}
```

---

## 带边框的文本框

```tsx
import { TextArea } from '@alipay/agentic-design-mobile';

export function TextAreaBordered() {
  return (
    <TextArea
      bordered
      placeholder="有什么想问我的吗～"
      onChange={(value) => {
        console.log(value);
      }}
    />
  );
}
```