# InputTag InputTag

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/input-tag
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

标签输入。

## 安装

```bash
npm install @arco-design/web-react@2.66.18
```

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **前缀/前置标签/后置标签**：前缀 / 前置标签 / 后置标签
- **不同尺寸**：通过设置 `size` 来指定大小。
- **获取选项的文本**：可以通过设置 `labelInValue=true` 获取选项的 label 值
- **校验与格式化输入**：通过 `validate` 校验输入。此外，可以返回**非布尔类型**来将用户输入的字符串为特定的 `value` 格式。
- **失焦时保存**：设置 `saveOnBlur` 在失焦时自动将正在输入的文本保存为标签。
- **自定义标签节点**：指定 `renderTag` 来自定义标签节点。
- **拖拽排序**：指定 `dragToSort` 属性以允许对已输入的值进行拖拽排序。
- **自动分词**：设置 `tokenSeparators` 可以使用自动分词功能。尝试复制下方文本到输入框里。
- **最大标签数**：通过 `maxTagCount` 设置最多展示的标签数，`maxTagCount.render` 自定义 `+x` 部分的节点内容。
- **响应式显示Tag**：通过 `maxTagCount=responsive` 设置根据容器尺寸动态显示 Tag 数。会监听所有 Tag 及容器的尺寸变化，所以在标签数较多时不建议使用，可能存在性能问题。 此时拖拽和动画效果不可用。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API

### InputTag

|参数名|描述|类型|默认值|版本|
|---|---|---|---|---|
|allowClear|是否允许清除|boolean |`-`|-|
|animation|是否为内部标签变化添加动画。|boolean |`true`|2.15.0|
|autoFocus|自动聚焦|boolean |`-`|-|
|disabled|是否禁用|boolean |`-`|-|
|dragToSort|是否可以通过拖拽为 Tag 排序|boolean |`-`|2.27.0|
|error|是否是错误状态.(废弃，下个大版本移除，使用 status='error' 替代)|boolean |`-`|-|
|labelInValue|设置传入和回调出的值均为 `{ label: '', value: ''}` 格式。|boolean |`-`|-|
|readOnly|是否只读|boolean |`-`|-|
|saveOnBlur|是否在失焦时自动存储正在输入的文本|boolean |`-`|2.25.0|
|inputValue|控件的输入框内的值|string |`-`|-|
|placeholder|预设文案|string |`-`|-|
|maxTagCount|最多显示多少个 `tag`|\| number\| 'responsive'\| {count: number \| 'responsive';render?: (invisibleTagCount: number, value: T[]) => ReactNode;popoverProps?: Partial<[PopoverProps](popover#popover)>;} |`-`|2.59.0. `responsive ` in `2.62.0`|
|size|不同尺寸|'mini' \| 'small' \| 'default' \| 'large' |`-`|-|
|status|状态|'error' \| 'warning' |`-`|2.45.0|
|addAfter|输入框后添加元素|ReactNode |`-`|2.47.0|
|addBefore|输入框前添加元素|ReactNode |`-`|2.47.0|
|prefix|添加前缀文字或者图标|ReactNode |`-`|2.47.0|
|suffix|后缀|ReactNode |`-`|-|
|className|节点类名|string \| string[] |`-`|-|
|defaultValue|默认值|T[] |`-`|-|
|icon|自定义图标|{ removeIcon?: ReactNode; clearIcon?: ReactNode } |`-`|-|
|style|节点样式|CSSProperties |`-`|-|
|tokenSeparators|触发自动分词的分隔符|string[] |`-`|2.44.0|
|validate|校验函数，默认在 按下enter时候触发。|(inputValue: string, values: T[]) =&gt; boolean \| Promise&lt;boolean&gt; \| T \| Promise&lt;T&gt; |`(inputValue, values) => inputValue && values.every((item) => item !== inputValue)`|return type T and `Promise<T>` in 2.37.0|
|value|控件值|T[] |`-`|-|
|onBlur|失去焦点时候触发|(e) => void |`-`|-|
|onChange|控件值改变时触发|(value: T[], reason: [ValueChangeReason](#valuechangereason)) => void |`-`|`reason` in 2.27.0|
|onClear|点击清除按钮的回调|() => void |`-`|2.20.0|
|onClick|单击组件的回调。|(e) => void |`-`|-|
|onFocus|聚焦时触发|(e) => void |`-`|-|
|onInputChange|输入框文本改变的回调。|(inputValue: string, event?) => void |`-`|-|
|onKeyDown|键盘事件回调|(e) => void |`-`|-|
|onPaste|输入框文本粘贴的回调。|(e) => void |`-`|-|
|onPressEnter|按 enter 键触发|(e) => void |`-`|-|
|onRemove|移除某一个标签时改变时触发|(value: T, index: number, event) => void |`-`|-|
|renderTag|自定义标签渲染，`props` 为当前标签属性，`index` 为当前标签的顺序，`values` 为所有标签的值.|(props: {value: any;label: ReactNode;closable: boolean;onClose: (event) => void;},index: number,values: [ObjectValueType](#objectvaluetype)[]) => ReactNode |`-`|index、values added in 2.15.0|

### ObjectValueType

```js
export type ObjectValueType = {
  value?: any;
  label?: ReactNode;
  closable?: boolean;
};
```

### ValueChangeReason

```js
export type ValueChangeReason = "add" | "remove" | "clear" | "sort";
```

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt