其它组件
基础用法
AI 时代的组件库
InputTag 完整案例
标签输入框 InputTag标签输入。
结合 Tailwind
edit js
结合 CSS
edit css
edit js
使用方法
1import { InputTag, IconCloseLine } from '@t-headless-ui/react';
2
3<InputTag.Root>
4 <InputTag.Tag />
5 <InputTag.Input />
6 <InputTag.Clear>
7 <IconCloseLine />
8 </InputTag.Clear>
9</InputTag.Root>API
InputTag.Root Props
接口名: InputTagRootProps
继承: Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>
| 参数名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| defaultValue | (ObjectValueType | string)[] | 默认 tag 值 | - |
| value | (ObjectValueType | string)[] | tag 值 | - |
| inputValue | string | 输入框内的值 | - |
| disabled | boolean | 是否禁用 | - |
| disableInput | boolean | 是否禁用输入框 | - |
| readOnly | boolean | 是否只读 | - |
| onRemove | (value: ObjectValueType, index: number, event: any) => void | 移除某一个标签时改变时触发 | - |
| onChange | (value: any[], reason: ValueChangeReason) => void | 控件值改变时触发 | - |
| labelInValue | boolean | 设置传入和回调出的值均为 `{ label: '', value: ''}` 格式。 | - |
| maxTagCount | number | { count: number; render: (hiddenList: ObjectValueType[]) => ReactNode; } | 最大标签数, 支持自定义渲染 | - |
| ref | React.Ref<InputTagHandle> | 自定义 ref, 返回 div 元素 | - |
| focused | boolean | 是否聚焦 | - |
| validate | (inputValue: string, values: ObjectValueType[]) => boolean | Promise<boolean> | ObjectValueType | Promise<ObjectValueType> | 校验函数，默认在 按下enter时候触发。 | (inputValue, values) => inputValue && values.every((item) => item !== inputValue) |
| tokenSeparators | string[] | 触发自动分词的分隔符 | - |
InputTag.Input Props
接口名: InputTagInputProps
| 参数名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| className | string | 自定义类名 | - |
| style | React.CSSProperties | 自定义样式 | - |
| placeholder | string | 预设文案 | - |
| saveOnBlur | boolean | 是否在失焦时自动存储正在输入的文本 | - |
| onBlur | (e: React.FocusEvent<HTMLInputElement>) => void | 失去焦点时候触发 | - |
| onFocus | (e: React.FocusEvent<HTMLInputElement>) => void | 聚焦时触发 | - |
| onPressEnter | (e: React.KeyboardEvent<HTMLInputElement>) => void | 按 enter 键触发 | - |
| onInputChange | (inputValue: string, event?: React.ChangeEvent<HTMLInputElement>) => void | 输入框文本改变的回调。 | - |
| onKeyDown | (e: React.KeyboardEvent<HTMLInputElement>) => void | 键盘事件回调 | - |
| onPaste | (e: React.ClipboardEvent<HTMLInputElement>) => void | 输入框文本粘贴的回调。 | - |
| ref | React.Ref<RefInputType> | 返回 Input 元素的 blur, focus 方法, 以及 inputDom 方法获取 Input 元素 | - |
InputTag.Tag Props
接口名: InputTagProps
| 参数名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| renderTag | (props: { value: any; label: ReactNode; closable: boolean; onClose: (event: React.MouseEvent) => void; readOnly: boolean; disabled: boolean; }, index: number, values: ObjectValueType[]) => ReactNode | 自定义标签渲染，`props` 为当前标签属性和组件状态，`index` 为当前标签的顺序，`values` 为所有标签的值. | - |
InputTag.Clear Props
接口名: InputClearProps
继承: React.HTMLAttributes<HTMLDivElement>
| 参数名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| children | ReactNode | 自定义清除图标 | - |
ObjectValueType
接口名: ObjectValueType
| 参数名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| value | any | 标签值 | - |
| label | ReactNode | 标签显示文案 | - |
| disabled | boolean | 是否可关闭 | - |
ValueChangeReason
接口名: ValueChangeReason
| 类型 |
|---|
| 'add' | 'remove' | 'clear' | 'sort' |
InputTag ref
接口名: InputTagHandle
| 参数名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| focus | () => void | 聚焦输入框 | - |
| blur | () => void | 失焦输入框 | - |
| inputDom | HTMLInputElement | 输入框 dom元素 | - |
| dom | HTMLInputElement | 输入框 dom元素 | - |