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监听事件,从而实现联想功能

  1. /** * Sample React Native App * https://github.com/facebook/react-native * @flow TextInput自动提示输入 */
  2.  
  3. import React,{ Component } from 'react';
  4. import {
  5. AppRegistry,StyleSheet,Text,Image,TextInput,View
  6. } from 'react-native';
  7.  
  8. var Dimensions = require('Dimensions');
  9. var ScreenWidth = Dimensions.get('window').width;
  10.  
  11. class TextInputView extends Component {
  12.  
  13. //构造函数
  14. constructor(props) {
  15. super(props);
  16. this.state = {text: ''};
  17. }
  18.  
  19. //隐藏
  20. hide(val){
  21. this.setState({
  22. show: false,value: val
  23. });
  24. }
  25.  
  26. //获取value值调用方法
  27. getValue(text) {
  28. var value = text;
  29. this.setState({
  30. show: true,value: value
  31. });
  32. }
  33.  
  34. render() {
  35. return (
  36. <View style={styles.container}>
  37. <TextInput style = {styles.styleInput}
  38. returnKeyType = "search"
  39. placeholder= "请输入搜索关键字"
  40. onEndEditing = {this.hide.bind(this,this.state.value)}
  41. value = {this.state.value}
  42. onChangeText = {this.getValue.bind(this)}/>
  43.  
  44. <Text style={styles.styleText}>搜索结果:</Text>
  45.  
  46. {this.state.show?
  47. <View style = {[styles.styleResult]}>
  48. <Text onPress= {this.hide.bind(this,this.state.value + '街')}
  49. style = {styles.item}
  50. numberOfLines = {1}>{this.state.value}街</Text>
  51. <Text onPress = {this.hide.bind(this,this.state.value + '商厦')}
  52. style = {styles.item}
  53. numberOfLines = {1}>{this.state.value}商厦</Text>
  54. <Text onPress = {this.hide.bind(this,111 + this.state.value + '超市')}
  55. style = {styles.item}
  56. numberOfLines = {1}>111{this.state.value}超市</Text>
  57. <Text onPress = {this.hide.bind(this,this.state.value + '车站')}
  58. style = {styles.item}
  59. numberOfLines = {1}>{this.state.value}车站</Text>
  60. </View>:null}
  61. </View>
  62. );
  63. }
  64. }
  65.  
  66. const styles = StyleSheet.create({
  67. container: {
  68. flex: 1,backgroundColor:'#ffffff',marginTop:20
  69. },styleInput: {
  70. height: 40,borderWidth: 1,marginLeft: 10,marginRight:10,paddingLeft: 5,borderColor: '#cccccc',borderRadius: 4,},styleResult: {
  71. marginTop: 10,marginLeft: 15,styleText: {
  72. fontSize: 18,marginTop:10,marginLeft:15
  73. },styleItem: {
  74. fontSize: 20,padding: 5,paddingTop: 10,paddingBottom: 10,marginLeft:15,borderColor: '#dddddd',borderTopWidth: 0,}
  75. });
  76.  
  77. export default TextInputView;

猜你在找的React相关文章