Input
- category: UI
- chinese: 带UI的输入框
- type: UI组件
注意 此 Input 自带了一些UI样式,如果你希望自己封装样式,可以使用TextInput组件。
API
属性配置 | 说明 | 类型 | 默认值 |
---|
type | 类型,可选为enclosed(有边线)/inset(空白) | string | enclosed |
multiple | 是否为多行,不选则为单行 | bool | false |
state | 状态,可选为''/success/error/warning | string | '' |
value | 当前的value 值 | string | |
disabled | 状态 设置文本域禁用状态 | boolean | false |
defaultValue | 初始化的value 值(非受控用法) | string | |
onInput | 输入事件 | function | false |
onFocus | Focus事件 | function | false |
onBlur | Blur事件 | function | false |
onChange | change事件 (在weex native 的触发时机可能有问题) | function(value, e) | |
maxLength | 最大长度 | number | undefined |
hasFeedback | 是否出现反馈 | boolean | false |
hasClear | 是否是否出现clear按钮,与hasFeedback互斥 | boolean | false |
hasLimitHint | 是否显示最大长度的提示, 仅对multiple有效 | boolean | false |
addonBefore | 前置附加文本域, multiple无效 | string | '' |
addonAfter | 后置附加文本域, multiple无效 | string | '' |
htmlType | 键盘类型,可选 text url password tel date time email | string | text |
关于defaultValue 与 value (非受控与受控的差别)
- defaultValue : 传入value 默认值,用于constructor中计算使用,生命周期函数改变也不会再改变。
<Input defaultValue="羊绒大衣" onInput={(e)=>{console.log('onInput==>',e.value || e.target.value)}} />
- value: 受控用法,会随着生命周期函数改变而改变。
<Input value={this.state.value} onChange={(value,e)=>{ this.setState({value:value});console.log('onChange==>',value)}} />
注意:不要使用 value={this.state.value}
与 onInput={(value,e)=>{ this.setState({value:value})}}
对 this.state.value 进行双向绑定,将会破坏中文输入法对于输入中文状态的字符的处理,导致输入中文的时候出现多字bug