nuke-input

Input

• category: UI
• chinese: 输入框
• type: UI组件

---

API

属性配置	说明	类型	默认值
type	键盘类型，可选 text url password tel date time email	string	text
autoFocus	自动获得焦点	boolean	false
maxLength	最大长度	number	undefined
multiple	是否为多行，不选则为单行	bool	false
value	当前的value 值	string
defaultValue	初始化的value 值(非受控用法)	string
disabled	状态 设置文本域禁用状态	boolean	false
onInput	输入事件	function(e)	false
onFocus	Focus事件	function	false
onBlur	Blur事件	function	false
onChange	change	function(value, e)
onReturn	仅 native 有效，return 事件，用户在手机上点击了 return 键触发（键盘右下角），返回值 e {returnKeyType:'类型',value:'输入框的值'}	function(e)	false
returnKeyType	仅 native 有效，return 键展示类型（键盘右下角的那个键），可选 default go next search send done	string	default
focus 实例方法	让input获得焦点	function
blur 实例方法	让input失去焦点	function
rows	多行input中可同时显示的行数	number	2

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