React Native之TextInput组件实现联想输入

TextInput组件是最基本的组件，相关介绍请查看TextInput组件介绍

输入框组件属性

输入框组件的主要属性如下：

autoCapitalize : 枚举类型，可选值有none,sentences,words,characters.当用户输入时，用于提示。
placeholder：占位符，在输入前显示的文本内容。
value ：文本输入框的默认值。
placeholdertTextColor : 占位符文本颜色。
password ：如果为ture ，则是密码输入框，文本显示为＊＊＊。
multiline ：如果为true ，则是多行输入。
editable ：如果为false ，文本框不可输入。其默认值事true。
autoFocus : 如果为true，将自动聚焦。
clearButtonMode : 枚举类型，可选值有never，while－enditing , unless-editing,always.用于显示清除按钮。
maxLength : 能够输入的最长字符数。
enablesReturnKeyAutomatically : 如果值为true，表示没有文本时键盘是不能有返回键的。其默认值为false。
returnKeyType : 表示软键盘返回键显示的字符串。枚举类型，可选值有default,go,google,join,next,route,search,send,yahoo,done,emergency-call。
onChangeText : 当文本输入框的内容发生变化时，调用该函数。
onChangeText接收一个文本的参数对象。
onChange : 当文本变化时，调用该函数。
onEndEditing : 当结束编辑时，调用该函数。
onBlur : 失去焦点出发事件。
onFocus : 获得焦点出发事件。
onSubmitEditing : 当结束编辑后，点击键盘的提交按钮出发该事件。

实例

在实际开发中，我们经常会碰到联想输入的情况，有的是结合后台返回的，有的是本地联想的。那么今天我们看一个联想输入的例子：

我们通过给TextInput绑定onChangeText监听事件，从而实现联想功能。

代码语言：javascript复制

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow TextInput自动提示输入
 */

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

 var Dimensions = require('Dimensions');
 var ScreenWidth = Dimensions.get('window').width;

class TextInputView extends Component {

  //构造函数
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

   //隐藏
    hide(val){
        this.setState({
            show: false,
            value: val
        });
    }

    //获取value值调用的方法
    getValue(text) {
        var value = text;
        this.setState({
            show: true,
            value: value
        });
    }

   render() {
     return (
       <View style={styles.container}>
       <TextInput style = {styles.styleInput}
          returnKeyType = "search"
          placeholder= "请输入搜索关键字"
          onEndEditing = {this.hide.bind(this,this.state.value)}
          value = {this.state.value}
          onChangeText = {this.getValue.bind(this)}/>

          <Text style={styles.styleText}>搜索结果：</Text>

         {this.state.show?
          <View style = {[styles.styleResult]}>
          <Text onPress= {this.hide.bind(this,this.state.value   '街')}
            style = {styles.item}
            numberOfLines = {1}>{this.state.value}街</Text>
          <Text onPress = {this.hide.bind(this,this.state.value   '商厦')}
            style = {styles.item}
            numberOfLines = {1}>{this.state.value}商厦</Text>
          <Text onPress = {this.hide.bind(this,111   this.state.value   '超市')}
            style = {styles.item}
            numberOfLines = {1}>111{this.state.value}超市</Text>
          <Text onPress = {this.hide.bind(this,this.state.value   '车站')}
            style = {styles.item}
            numberOfLines = {1}>{this.state.value}车站</Text>
           </View>:null}
       </View>
     );
    }
  }

 const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor:'#ffffff',
     marginTop:20
   },
   styleInput: {
     height: 40,
     borderWidth: 1,
     marginLeft: 10,
     marginRight:10,
     paddingLeft: 5,
     borderColor: '#cccccc',
     borderRadius: 4,
   },
   styleResult: {
    marginTop: 10,
    marginLeft: 15,
    },
   styleText: {
     fontSize: 18,
     marginTop:10,
     marginLeft:15
   },
   styleItem: {
    fontSize: 20,
    padding: 5,
    paddingTop: 10,
    paddingBottom: 10,
    borderWidth: 1,
    marginLeft:15,
    borderColor: '#dddddd',
    borderTopWidth: 0,
    }
 });

export default TextInputView;

reactnative

0 人点赞