Reactnative-textinput usage

TextInput is a basic component that allows users to enter text through the keyboard in the app. The properties of this component provide configuration for a variety of features, such as auto-complete, auto-case, placeholder text, and many different keyboard types, such as a pure numeric keypad, and so on.

The simplest use is to throw an TextInput event into the application and subscribe to it onChangeText to read the user's input. It also has some other events, such onSubmitEditing as and onFocus . A simple example is as follows:

 <TextInput    40, borderColor: ‘gray‘, borderWidth: 1}}    onChangeText={(text) => this.setState({text})}    value={this.state.text} />

* Note that some properties are multiline(多行输入) valid only when True or false.

Common Properties Autocapitalizeenum (' None ', ' sentences ', ' words ', ' characters ')

Controls whether TextInput will automatically switch specific characters to uppercase:

• Characters: all the characters.
• Words: The first character of each word.
• Sentences: The first character of each sentence (default).
• None: Do not automatically toggle any characters to uppercase.

AutoFocusBOOL

If true, the focus is obtained after Componentdidmount. The default value is False.

EditableBOOL

If False, the text box is not editable. The default value is true.

Keyboardtypeenum ("Default", ' Numeric ', ' email-address ', "ascii-capable", ' numbers-and-punctuation ', ' url ', ' Number-pad ', ' Phone-pad ', ' name-phone-pad ', ' decimal-pad ', ' Twitter ', ' web-search ')

Decide what kind of soft keyboard pops up, such as numeric (a purely numeric keypad).

MaxLength Number

Limits the maximum number of characters in a text box. Using this attribute without the use of JS logic to achieve, you can avoid flickering phenomenon.

MultilineBOOL

If true, multiple lines of text can be entered in the text box. The default value is False.

Onchangetextfunction

This callback function is called when the contents of the text box change. The changed text content is passed as a parameter.  

Onendeditingfunction

This callback function is called when the text input is finished.

Onsubmiteditingfunction

This callback function calls this function when the/button of the soft keyboard 确定 提交 is pressed. If multiline={true} This property is not available.

Placeholderstring

If there is no text input, this string is displayed.

Placeholdertextcolorstring

The text color of the placeholder string display.

SecuretextentryBOOL

If true, the text box obscures the text you entered earlier, so sensitive text like passwords can be more secure. The default value is False.

Clearbuttonmodeenum (' Never ', ' while-editing ', ' unless-editing ', ' Always ')

Whether to display the clear button to the right of the text box.

Example

<textinput
style = {{height:25, bordercolor: ' Gray ', Borderwidth:1, Borderradius:3}}
Returnkeytype = "Next"
placeholder = "title"
Onchangetext = {This.getvalue}//Use this method to get the value of the input box
/>

How to get the values in the input box
Getvalue:function (text) {
var value = text;
This.setstate ({
Value:value
});
}

Reactnative-textinput usage