nuke-input

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	''

关于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