Input

• category: UI
• chinese: 输入框
• type: UI Component

---

Design

Nuke Input is the implement of input box, can be multiple mode or single line mode.

Type props determine keyboard mode when inputing.

Nuke Input also implements material design mode by materialDesign=true props.

API

Props	Description	Type	Default
type	Keyboard type. Optional: text url password tel date time email	string	text
autoFocus	Auto focus	boolean	false
multiple	Whether it is multi line. Default: single row	bool	false
value	Current values	string
defaultValue	Initialized values(uncontrolled usage)	string
disabled	Setting text field disabled state	boolean	false
onInput	Input event	function(e)	false
onFocus	Focus event	function	false
onBlur	Blur event	function	false
onChange	change	function(value, e)
onReturn	Only native is effective, return event, The user clicks on the return button to trigger the phone (the lower right corner of the keyboard), callback value is e {returnKeyType: 'type', value: 'The value of the input box'}	function(e)	false
returnKeyType	Only native is effective, return key display type (the key in the lower right corner of the keyboard). Option:default go next search send done	string	default
focus case method	Let input get focus	function
blur case method	Let input lose focus	function
rows	The number of rows that can be displayed simultaneously in multiline input	number	2
placeholder	placeholder text	string	null
placeholderColor	color of the placeholder, only native is effective	string	'#999999'

Difference between defaultValue and value (uncontrolled and controlled)

• defaultValue: uncontrolled usage, value will be initialized in constructor, will not be changed ever since.

<Input defaultValue="some default value" onChange={(value,e)=>{console.log(value)}} />

• value: controlled usage , controlled by parent state value

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

Case method focus and blur

    //In some cases, myinput needs to be forced to lose focus.
    focus = (e) => {
        this.refs.myinput.wrappedInstance.focus();
    }
    blur = (e) => {
        this.refs.myinput.wrappedInstance.blur();
    }
    change = (value,e) => {
        console.log(value);//After losing focus, it triggers onChange.
    }
    render(){
        return (
            <View>
                <Input ref="myinput" onChange={this.change}/>
                <Button type="primary" onPress={this.focus}>focus it</Button>
                <Button type="primary" onPress={this.blur}>blur it</Button>
            </View>
        )
    }