Input 输入框

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

基本用法

Loading demo...

APIs

Input

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

可选值:
'small'(小)
'medium'(中)
'large'(大)
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'(成功)
'warning'(警告)
Enum-
isPreview是否为预览态Booleanfalse
renderPreview预览态模式下渲染的内容

签名:
Function(value: number) => void
参数:
value: {number} 评分值
Function-
labellabelReactNode-
hasClear是否出现clear按钮Boolean-
hasBorder是否有边框Booleantrue
onPressEnter按下回车的回调

签名:
Function() => void
Functionfunc.noop
hint水印 (Icon的type类型,和hasClear占用一个地方)String/ReactNode-
innerBefore文字前附加内容ReactNode-
innerAfter文字后附加内容ReactNode-
addonBefore输入框前附加内容ReactNode-
addonAfter输入框后附加内容ReactNode-
addonTextBefore输入框前附加文字ReactNode-
addonTextAfter输入框后附加文字ReactNode-
autoComplete(原生input支持)String'off'
autoFocus自动聚焦(原生input支持)Boolean-

Input.TextArea

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

可选值:
'small'(小)
'medium'(中)
'large'(大)
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'(错误)
'warning'
Enum-
isPreview是否为预览态Booleanfalse
renderPreview预览态模式下渲染的内容

签名:
Function(value: number) => void
参数:
value: {number} 评分值
Function-
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-

Demos

Loading demo...

Loading demo...

Loading demo...

Loading demo...

Loading demo...

Loading demo...

Loading demo...

Loading demo...

Loading demo...

Loading demo...

Loading demo...

Loading demo...

Loading demo...