Input / 输入框
处理用户的输入数据。
输入框组件包含额外的 Hooks,详情请参阅 useInput 小节。
基础的
基础的输入字段。
大小
不同大小的输入框。
宽度
手动地设置宽度,或其他样式。
不可交互地
禁用输入框地所有交互效果。
行内标签
在输入框内显示短小地行内文本。
块级标签
为标签自定义更多样式。
状态
用色彩区分不同的状态。
图标
指定一个图标组件。
密码
显示或隐藏密码文本。
清除按钮
在输入框内增加一个用于清除文本的按钮。
变化事件
捕获输入框的文本变化。
命令式 API
使用非受控方式更新组件。
APIs / 接口文档
Input.Props
属性 | 描述 | 类型 | 推荐值 | 默认 |
---|---|---|---|---|
value | 命令式设定输入框的值 | string | - | - |
initialValue | 初始值 | string | - | - |
placeholder | 占位文本 | string | - | - |
type | 输入框状态 | InputTypes | InputTypes | default |
htmlType | 原生 HTML type 属性 | string | - | text |
readOnly | 是否设置输入框为只读 | boolean | - | false |
disabled | 是否禁用输入框 | boolean | - | false |
clearable | 是否展示清除按钮 | boolean | - | false |
label | 文本标签 | string | - | - |
icon | 输入框图标 | React.ReactNode | - | - |
labelRight | 居于右侧的文本标签 | string | - | - |
iconRight | 居于右侧的图标 | React.ReactNode | - | - |
iconClickable | 图标是否可点击 | boolean | - | false |
onIconClick | 图标点击事件 | (e: React.ChangeEvent) => void | - | - |
onChange | 输入框变化事件 | (e: React.ChangeEvent) => void | - | - |
onClearClick | 清除按钮的点击事件 | (e: React.MouseEvent) => void | - | - |
ref | 转发的原生输入框 Ref | Ref<HTMLInputElement | null> | - | - |
... | 原生属性 | InputHTMLAttributes | 'id', 'className', ... | - |
Input.Password.Props
属性 | 描述 | 类型 | 推荐值 | 默认 |
---|---|---|---|---|
hideToggle | 隐藏切换密码的按钮 | boolean | - | false |
... | 输入框组件属性 | Input.Props | Input.Props | - |
InputTypes
type InputTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
文档贡献者