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

前端之家收集整理的这篇文章主要介绍了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监听事件,从而实现联想功能

/** * 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,marginLeft:15,borderColor: '#dddddd',borderTopWidth: 0,}
 });

export default TextInputView;
原文链接:https://www.f2er.com/react/303961.html

猜你在找的React相关文章