开发指南
何时使用
表单输入，一般配合Form使用
简单
密码输入框
设置 Input 为 密码类型；
前后扩展
清除按钮
通过设置 hasClear 添加清除按钮.
错误状态
为 Input 设置 error 状态；
最大长度
最大长度 hasLimitHint 会展现限制数字; cutString 可控制是否要切割字符串, 用于只展示最大长度
去除空格
onChange 返回会自动去除头尾空字符
禁用状态
为 Input 设置 disabled 状态；
水印和前后缀
可以添加水印， 为 input 前后端增加额外内容
自动高度
设置 Input 为 多行文本域；
输入框组合
Group 具有两边长度固定中间组件任意伸缩的能力。在 Input 中可以用 addonBefore/addonAfter 快速使用
自定义样式
通过 style 设置宽度
无障碍
通过aria-label对Input组件进行描述。关于键盘操作请参考ARIA and KeyBoard。
API
Input
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 当前值 | String/Number | - |
| size | 尺寸 可选值: 'xs'(小小) 'small'(小) 'medium'(中) 'large'(大) | Enum | 'medium' |
| defaultValue | 初始化值 | String/Number | - |
| onChange | 发生改变的时候触发的回调 签名: Function(value: String, e: Event) => void 参数: value: {String} 数据 e: {Event} DOM事件对象 | Function | func.noop |
| onKeyDown | 键盘按下的时候触发的回调 签名: Function(e: Event, opts: Object) => void 参数: e: {Event} DOM事件对象 opts: {Object} 可扩展的附加信息： - opts.overMaxLength: {Boolean} 已超出最大长度 - opts.beTrimed: {Boolean} 输入的空格被清理 | Function | func.noop |
| disabled | 禁用状态 | Boolean | false |
| maxLength | 最大长度 | Number | null |
| hasLimitHint | 是否展现最大长度样式 | Boolean | false |
| cutString | 当设置了maxLength时，是否截断超出字符串 | Boolean | true |
| readOnly | 只读 | Boolean | false |
| trim | onChange返回会自动去除头尾空字符 | Boolean | false |
| placeholder | 输入提示 | String | - |
| onFocus | 获取焦点时候触发的回调 签名: Function(e: Event) => void 参数: e: {Event} DOM事件对象 | Function | func.noop |
| onBlur | 失去焦点时候触发的回调 签名: Function(e: Event) => void 参数: e: {Event} DOM事件对象 | Function | func.noop |
| getValueLength | 自定义字符串计算长度方式 签名: Function(value: String) => Number 参数: value: {String} 数据 返回值: {Number} 自定义长度 | Function | func.noop |
| htmlType | 原生type | String | - |
| name | name | String | - |
| state | 状态 可选值: 'error'(错误) 'loading'(校验中) 'success'(成功) | Enum | - |
| label | label | ReactNode | - |
| hasClear | 是否出现clear按钮 | Boolean | - |
| hasBorder | 是否有边框 | Boolean | true |
| onPressEnter | 按下回车的回调 签名: Function() => void | Function | func.noop |
| hint | 水印 (Icon的type类型，和hasClear占用一个地方) | String | - |
| innerBefore | 文字前附加内容 | ReactNode | - |
| innerAfter | 文字后附加内容 | ReactNode | - |
| addonBefore | 输入框前附加内容 | ReactNode | - |
| addonAfter | 输入框后附加内容 | ReactNode | - |
| addonTextBefore | 输入框前附加文字 | ReactNode | - |
| addonTextAfter | 输入框后附加文字 | ReactNode | - |
| autoComplete | (原生input支持) | String | 'off' |
| autoFocus | 自动聚焦(原生input支持) | Boolean | - |
Input.TextArea
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 当前值 | String/Number | - |
| defaultValue | 初始化值 | String/Number | - |
| onChange | 发生改变的时候触发的回调 签名: Function(value: String, e: Event) => void 参数: value: {String} 数据 e: {Event} DOM事件对象 | Function | func.noop |
| onKeyDown | 键盘按下的时候触发的回调 签名: Function(e: Event, opts: Object) => void 参数: e: {Event} DOM事件对象 opts: {Object} 可扩展的附加信息： - opts.overMaxLength: {Boolean} 已超出最大长度 - opts.beTrimed: {Boolean} 输入的空格被清理 | Function | func.noop |
| disabled | 禁用状态 | Boolean | false |
| maxLength | 最大长度 | Number | null |
| hasLimitHint | 是否展现最大长度样式 | Boolean | false |
| cutString | 当设置了maxLength时，是否截断超出字符串 | Boolean | true |
| readOnly | 只读 | Boolean | false |
| trim | onChange返回会自动去除头尾空字符 | Boolean | false |
| placeholder | 输入提示 | String | - |
| onFocus | 获取焦点时候触发的回调 签名: Function(e: Event) => void 参数: e: {Event} DOM事件对象 | Function | func.noop |
| onBlur | 失去焦点时候触发的回调 签名: Function(e: Event) => void 参数: e: {Event} DOM事件对象 | Function | func.noop |
| getValueLength | 自定义字符串计算长度方式 签名: Function(value: String) => Number 参数: value: {String} 数据 返回值: {Number} 自定义长度 | Function | func.noop |
| htmlType | 原生type | String | - |
| name | name | String | - |
| state | 状态 可选值: 'error'(错误) | Enum | - |
| hasBorder | 是否有边框 | Boolean | true |
| autoHeight | 自动高度 true / {minRows: 2, maxRows: 4} | Boolean/Object | false |
| rows | 多行文本框高度 (不要直接用height设置多行文本框的高度, ie9 10会有兼容性问题) | Number | 4 |
Input.Group
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| addonBefore | 输入框前附加内容 | ReactNode | - |
| addonBeforeClassName | 输入框前附加内容css | String | - |
| addonAfter | 输入框后附加内容 | ReactNode | - |
| addonAfterClassName | 输入框后额外css | String | - |
| rtl | rtl | Boolean | - |
Input/TextArea 内部函数(通过refs获取)
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| getInputNode | 获取真正input节点 | Function | |
| focus | 获取焦点 签名: Function(start:Number, end: Number) 参数: start: {Number} 光标起始位置 end: {Number} 选择结束位置 | Function |
ARIA and KeyBoard
| 按键 | 说明 |
|---|---|
| Enter | 触发onKeyDown事件 |
| Any | 触发onChange事件 |