search

Home >Web Front-end >JS Tutorial >Detailed introduction to TextInput component

Detailed introduction to TextInput component

零下一度
零下一度Original
2017-06-28 10:21:282806browse

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.

原文:React Native - 文本输入框（TextInput）的使用详解 原文:React Native - 文本输入框（TextInput）的使用详解 原文:React Native - 文本输入框（TextInput）的使用详解

##(2) Sample code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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 "             
onChangeText={(text) =>
this.setState({text })}/>##                                                                             style={styles.btn}>
##                       
<Text style={styles.search} onPress={this
.search.bind(
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:"
+
this
.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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Example code for the Document Object ModelNext article：Example code for the Document Object Model

Related articles

See more