Detailed introduction to TextInput component

1, Introduction to TextInput component

In addition to realizing basic input functions as an input box, the TextInput component also provides many other functions, such as automatic verification, placeholders, and specifying different pop-up functions. keyboard type, etc.

2, component properties

(1) autoCapitalize: The first letter is automatically capitalized. Optional values ​​are: none, sentences, words, characters.

(2) placeholder: Placeholder, text content displayed before input.

(3)value: The default value of the text input box.

(4)placeholderTextColor: The color of the placeholder text.

(5) password: If true, it indicates the password input box. The text is displayed as "*"

## (6)

multiline: If true, it means multi-line input.

(7)

editable: The default is true. If set to false, it means it cannot be edited.

(8)

autoFocus: If true, the focus will be automatically obtained.

(9)

clearButtonMode: Indicates when the clear button will be displayed. Optional values ​​are: never, while-editing, unless-editing, always.

(10)

maxLength: The longest number of characters that can be entered.

(11)

enablesReturnKeyAutomatically: Default is false. Set to true to indicate that the return key cannot be used when no text is entered.

(12)

returnKeyType: A string representing the soft keyboard return key display. Optional values ​​are: default, go, google, join, next, route, search, send, yahoo, done, emergency-call. ##(13)

secureTextEntry: Default is

false. If true, the input content is hidden like a password box.

3, component method

(1)

onChange: This function is called when the text changes.

(2)

onEndEditing: This function is called when editing ends.

(3)

onBlur: Triggered when focus is lost.

(4)

onFocus: Triggered when focus is obtained.

(5)

onSubmitEditing: After finishing editing, click the submit button on the keyboard to trigger this event.

4, usage example

(1) Effect picture

• Add a TextInput to the page for entering text, and set related placeholder text and styles.

• When the text in the input box changes, the Text component below will count and display the length of the input text in real time.

• Click the "Search" button on the right side of the input box to pop up the contents of the input box.

##(2) Sample code

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
} from 'react-native';

//输入框组件
class Search extends Component {
  //构造函数
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  //组件渲染
  render() {
    return (
      <View style={styles.flex}>
          <View style={[styles.flexDirection, styles.inputHeight]}>
            <View style={styles.flex}>
              <TextInput
                style={styles.input}
        returnKeyType="search"
                                                                                                                    Please enter the keyword "
this.setState({text })}/>##                                                                             style={styles.btn}>
<Text style={styles.search} onPress={this
this)}>Search</Text>
##            < ;/View>                   < {styles.tip}>{this.state.text.length} text has been entered
##​ ​ </View>
);
}
//Click the search button
search(){
alert("The content you entered is:"

.state.text);
##}}
//Container component of the default applicationclass App extends Component {
render() {
##
   }
 }

//样式定义
const styles = StyleSheet.create({
  flex:{
    flex: 1,
  },
  flexDirection:{
    flexDirection:'row'
  },
  topStatus:{
    marginTop:25,
  },
  inputHeight:{
    height:45,
  },
  input:{
    height:45,
    borderWidth:1,
    marginLeft: 5,
    paddingLeft:5,
    borderColor: '#ccc',
    borderRadius: 4
  },
  btn:{
    width:55,
    marginLeft:-5,
    marginRight:5,
    backgroundColor:'#23BEFF',
    height:45,
    justifyContent:'center',
    alignItems: 'center'
  },
  search:{
    color:'#fff',
    fontSize:15,
    fontWeight:'bold'
  },
  tip:{
    marginLeft: 5,
    marginTop: 5,
    color: '#C0C0C0',
  }
});

AppRegistry.registerComponent('HelloWorld', () => App);

The above is the detailed content of Detailed introduction to TextInput component. For more information, please follow other related articles on the PHP Chinese website!