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	function(value, e)
maxLength	最大长度	number	undefined
hasLimitHint	是否显示最大长度的提示, 仅对multiple有效	boolean	false
htmlType	键盘类型，可选 text url password tel date time email	string	text
autoFocus	自动获得焦点	boolean	false
focus 实例方法	让input获得焦点	function
blur 实例方法	让input失去焦点	function

关于 defaultValue 与 value (非受控与受控的差别)

• defaultValue : 传入 value 默认值，用于 constructor 中计算使用，生命周期函数改变也不会再改变。

<Input defaultValue="羊绒大衣" onChange={(value,e)=>{console.log(value)}} />

• value: 受控用法，会随着生命周期函数改变而改变。

<Input value={this.state.value} onChange={(value,e)=>{console.log(value)}}/>

实例方法 focus 和 blur

    //在某些情况下需要让 myinput 强制失去焦点
    focus=(e)=>{
        this.refs.myinput.focus();
    }
    blur = (e)=>{
        this.refs.myinput.blur();
    }
    change=(value,e)=>{
        console.log(value);//强制失去焦点后，会触发 onCchange
    }
    render(){
        return (
            <View>
                <Input ref="myinput" onChange={this.change}/>
                <Button type="primary" onPress={this.focus}>点我让input获得焦点</Button>
                <Button type="primary" onPress={this.blur}>失去焦点，获取输入内容</Button>
            </View>
        )
    }