Sender输入框
Sender
输入框
用于聊天的输入框组件。
使用import { Sender } from "@ant-design/x"; |
基础用法，受控进行状态管理。
通过 submitType 控制换行与提交模式。
语音输入，需要用户同意麦克风权限。
自定义语音逻辑，从而实现调用三方库的语音识别功能。
通过 actions 属性，可以自定义发送按钮的行为。
使用 header 自定义文件上传示例。
使用 header 做引用效果。
使用 footer 自定义底部内容。
通过 actions 属性，调整默认样式。
使用 onPasteFile 获取黏贴的文件，配合 Attachments 进行文件上传。
使用 ref 选项控制聚焦。
通用属性参考：通用属性
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| actions | 自定义按钮，当不需要默认操作按钮时，可以设为 actions={false} | ReactNode | (oriNode, info: { components: ActionsComponents }) => ReactNode | - | - |
| allowSpeech | 是否允许语音输入 | boolean | SpeechConfig | false | - |
| classNames | 样式类名 | 见下 | - | - |
| components | 自定义组件 | Record<'input', ComponentType> | - | - |
| defaultValue | 输入框默认值 | string | - | - |
| disabled | 是否禁用 | boolean | false | - |
| loading | 是否加载中 | boolean | false | - |
| header | 头部面板 | ReactNode | - | - |
| prefix | 前缀内容 | ReactNode | - | - |
| footer | 底部内容 | ReactNode | (info: { components: ActionsComponents }) => ReactNode | - | - |
| readOnly | 是否让输入框只读 | boolean | false | - |
| rootClassName | 根元素样式类 | string | - | - |
| styles | 语义化定义样式 | 见下 | - | - |
| submitType | 提交模式 | SubmitType | enter | shiftEnter | - |
| value | 输入框值 | string | - | - |
| onSubmit | 点击发送按钮的回调 | (message: string) => void | - | - |
| onChange | 输入框值改变的回调 | (value: string, event?: React.FormEvent<HTMLTextAreaElement> | React.ChangeEvent<HTMLTextAreaElement> ) => void | - | - |
| onCancel | 点击取消按钮的回调 | () => void | - | - |
| onPasteFile | 黏贴文件的回调 | (firstFile: File, files: FileList) => void | - | - |
| autoSize | 自适应内容高度，可设置为 true | false 或对象：{ minRows: 2, maxRows: 6 } | boolean | { minRows?: number; maxRows?: number } | { maxRows: 8 } | - |
type SpeechConfig = {// 当设置 `recording` 时，内置的语音输入功能将会被禁用。// 交由开发者实现三方语音输入的功能。recording?: boolean;onRecordingChange?: (recording: boolean) => void;};
type ActionsComponents = {SendButton: React.ComponentType<ButtonProps>;ClearButton: React.ComponentType<ButtonProps>;LoadingButton: React.ComponentType<ButtonProps>;SpeechButton: React.ComponentType<ButtonProps>;};
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| nativeElement | 外层容器 | HTMLDivElement | - | - |
| focus | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' }) | - | - |
| blur | 取消焦点 | () => void | - | - |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| children | 面板内容 | ReactNode | - | - |
| closable | 是否可关闭 | boolean | true | - |
| forceRender | 强制渲染，在初始化便需要 ref 内部元素时使用 | boolean | false | - |
| open | 是否展开 | boolean | - | - |
| title | 标题 | ReactNode | - | - |
| onOpenChange | 展开状态改变的回调 | (open: boolean) => void | - | - |
