Nuke-input NPM

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

nuke input

nuke-base-input nuke-core nuke-env nuke-helper nuke-image nuke-text nuke-theme-provider nuke-view

@infinitebrahmanuniverse/nolb-nuk @everything-registry/sub-chunk-2353 nuke-ui @zalastax/nolb-nuk rox-input

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

Input

Design

API

Difference between defaultValue and value (uncontrolled and controlled)

Case method focus and blur

Case method `focus` and `blur`