Introduction détaillée au composant TextInput

1. Introduction au composant TextInput

En plus d'implémenter des fonctions de saisie de base en tant que zone de saisie, le composant TextInput fournit également de nombreuses autres fonctions, telles que la vérification automatique, les espaces réservés et la spécification de différentes pop. -fonctions de type clavier, etc.

2, propriétés du composant

(1) autoCapitalize : La première lettre est automatiquement mise en majuscule. Les valeurs facultatives sont : aucun, phrases, mots, caractères.

(2) espace réservé : espace réservé, contenu du texte affiché avant la saisie.

(3) value : La valeur par défaut de la zone de saisie de texte.

(4)placeholderTextColor : La couleur du texte de l'espace réservé.

(5) mot de passe : Si vrai, il indique la zone de saisie du mot de passe. Le texte est affiché sous la forme "*"

(6) multiligne : Si vrai, cela signifie une entrée multiligne.

(7) modifiable : La valeur par défaut est true. S'il est défini sur false, cela signifie qu'il ne peut pas être modifié.

(8) autoFocus : Si vrai, la mise au point sera obtenue automatiquement.

(9) clearButtonMode : Indique quand le bouton d'effacement sera affiché. Les valeurs facultatives sont : jamais, pendant l'édition, sauf si l'édition, toujours.

(10) maxLength : Le nombre de caractères le plus long pouvant être saisi.

(11)enablesReturnKeyAutomatically : la valeur par défaut est false. Définissez sur true pour indiquer que la touche retour ne peut pas être utilisée lorsqu'aucun texte n'est saisi.

(12) returnKeyType : Une chaîne représentant l'affichage de la touche retour du clavier logiciel. Les valeurs facultatives sont : default, go, google, join, next, route, search, send, yahoo , fait, appel d'urgence.

(13) secureTextEntry : La valeur par défaut est false. Si vrai, masquez la saisie comme une zone de mot de passe.

3. Méthode du composant

(1) onChange : Cette fonction est appelée lorsque le texte change.

(2)onEndEditing : Cette fonction est appelée à la fin de l'édition.

(3)onBlur : Déclenché lorsque la mise au point est perdue.

(4)onFocus : Déclenché lorsque la mise au point est obtenue.

(5)onSubmitEditing : Après avoir terminé l'édition, cliquez sur le bouton Soumettre du clavier pour déclencher cet événement.

4, exemples d'utilisation

(1) rendus

• Ajoutez un TextInput à la page pour saisir du texte et définissez le texte et les styles d'espace réservé associés.

• Lorsque le texte de la zone de saisie change, le composant Texte ci-dessous comptera et affichera la longueur du texte saisi en temps réel.

• Cliquez sur le bouton « Rechercher » sur le côté droit de la zone de saisie pour faire apparaître le contenu de la zone de saisie.

(2) Exemple de 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"
placeholder="请输入关键字"
onChangeText={(text) => this.setState({text})}/>
            </View>
            <View style={styles.btn}>
              <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>
            </View>
          </View>
          <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>
      </View>
    );
  }

  //搜索按钮点击
  search(){
    alert("您输入的内容为："+this.state.text);
  }
}

//默认应用的容器组件
class App extends Component {
   render() {
      return (
        <View style={[styles.flex, styles.topStatus]}>
         <Search></Search>
        </View>
      );
   }
 }

//样式定义
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);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!