Input 输入框

开发指南

何时使用

表单输入,一般配合Form使用



简单



密码输入框

设置 Input 为 密码类型;

http://7/2.com

http://.com

http://.com

http://.com

前后扩展







清除按钮

通过设置 hasClear 添加清除按钮.





0/100



0/100









错误状态

Input 设置 error 状态;

14/10

0/20

0/100

0/100

最大长度

最大长度 hasLimitHint 会展现限制数字; cutString 可控制是否要切割字符串, 用于只展示最大长度

去除空格

onChange 返回会自动去除头尾空字符



http://.com

0/10

0/10

禁用状态

Input 设置 disabled 状态;



水印和前后缀

可以添加水印, 为 input 前后端增加额外内容



自动高度

设置 Input 为 多行文本域;



.com

输入框组合

Group 具有两边长度固定中间组件任意伸缩的能力。在 Input 中可以用 addonBefore/addonAfter 快速使用



http://.com

0/10

0/10

自定义样式

通过 style 设置宽度

无障碍

通过aria-labelInput组件进行描述。关于键盘操作请参考ARIA and KeyBoard

API

Input

参数说明类型默认值
value当前值String/Number-
size尺寸

可选值:
'xs'(小小)
'small'(小)
'medium'(中)
Enum'medium'
defaultValue初始化值String/Number-
onChange发生改变的时候触发的回调

签名:
Function(value: String, e: Event) => void
参数:
value: {String} 数据
e: {Event} DOM事件对象
Functionfunc.noop
onKeyDown键盘按下的时候触发的回调

签名:
Function(e: Event, opts: Object) => void
参数:
e: {Event} DOM事件对象
opts: {Object} 可扩展的附加信息:
- opts.overMaxLength: {Boolean} 已超出最大长度
- opts.beTrimed: {Boolean} 输入的空格被清理
Functionfunc.noop
disabled禁用状态Booleanfalse
maxLength最大长度Numbernull
hasLimitHint是否展现最大长度样式Booleanfalse
cutString当设置了maxLength时,是否截断超出字符串Booleantrue
readOnly只读Booleanfalse
trimonChange返回会自动去除头尾空字符Booleanfalse
placeholder输入提示String-
onFocus获取焦点时候触发的回调

签名:
Function(e: Event) => void
参数:
e: {Event} DOM事件对象
Functionfunc.noop
onBlur失去焦点时候触发的回调

签名:
Function(e: Event) => void
参数:
e: {Event} DOM事件对象
Functionfunc.noop
getValueLength自定义字符串计算长度方式

签名:
Function(value: String) => Number
参数:
value: {String} 数据
返回值:
{Number} 自定义长度
Functionfunc.noop
htmlType原生typeString-
namenameString-
state状态

可选值:
'error'(错误)
'loading'(校验中)
'success'(成功)
Enum-
labellabelReactNode-
hasClear是否出现clear按钮Boolean-
hasBorder是否有边框Booleantrue
onPressEnter按下回车的回调

签名:
Function() => void
Functionfunc.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事件对象
Functionfunc.noop
onKeyDown键盘按下的时候触发的回调

签名:
Function(e: Event, opts: Object) => void
参数:
e: {Event} DOM事件对象
opts: {Object} 可扩展的附加信息:
- opts.overMaxLength: {Boolean} 已超出最大长度
- opts.beTrimed: {Boolean} 输入的空格被清理
Functionfunc.noop
disabled禁用状态Booleanfalse
maxLength最大长度Numbernull
hasLimitHint是否展现最大长度样式Booleanfalse
cutString当设置了maxLength时,是否截断超出字符串Booleantrue
readOnly只读Booleanfalse
trimonChange返回会自动去除头尾空字符Booleanfalse
placeholder输入提示String-
onFocus获取焦点时候触发的回调

签名:
Function(e: Event) => void
参数:
e: {Event} DOM事件对象
Functionfunc.noop
onBlur失去焦点时候触发的回调

签名:
Function(e: Event) => void
参数:
e: {Event} DOM事件对象
Functionfunc.noop
getValueLength自定义字符串计算长度方式

签名:
Function(value: String) => Number
参数:
value: {String} 数据
返回值:
{Number} 自定义长度
Functionfunc.noop
htmlType原生typeString-
namenameString-
state状态

可选值:
'error'(错误)
Enum-
hasBorder是否有边框Booleantrue
autoHeight自动高度 true / {minRows: 2, maxRows: 4}Boolean/Objectfalse
rows多行文本框高度
(不要直接用height设置多行文本框的高度, ie9 10会有兼容性问题)
Number4

Input.Group

参数说明类型默认值
addonBefore输入框前附加内容ReactNode-
addonBeforeClassName输入框前附加内容cssString-
addonAfter输入框后附加内容ReactNode-
addonAfterClassName输入框后额外cssString-
rtlrtlBoolean-

Input/TextArea 内部函数(通过refs获取)

参数说明类型默认值
getInputNode获取真正input节点Function
focus获取焦点

签名:
Function(start:Number, end: Number)
参数:
start: {Number} 光标起始位置
end: {Number} 选择结束位置
Function

ARIA and KeyBoard

按键说明
Enter触发onKeyDown事件
Any触发onChange事件