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