React Native组件(四)TextInput组件解析
1 概述
TextInput组件和Text组件类似,内部都没有使用FlexBox布局,不同的是TextInput组件支持文字的输入,因为支持文字输入, TextInput组件要比Text组件多了一些属性和方法。TextInput组件支持Text组件所有的Style属性,而TextInput组件本身是没有特有的Style属性的。
2 属性
TextInput组件支持所有的View组件的属性,除此之外,它还有许多其他属性。
2.1 onChangeText
当输入框的内容发生变化时,就会调用onChangeText。 index.android.js
上面的例子我们用到了TextInput组件的onChangeText属性,当我们在TextInput中输入内容时,这个内容就会通过onChangeText的参数text传递回来,在onChangeText中将text的内容保存到state中。当我们点击Button时,通过Alert将state中保存的内容展现出来。
运行程序效果如下图所示。
在输入框中输入Android,点击搜索Button,可以看到输入的Android展示到了Alert中。
2.2 onChange
当输入框的内容发生变化时,也会调用onChange,只不过它所返回的参数是一个event,我们来改写2.1的代码:
通过event.nativeEvent.text可以得到用户输入的内容,如果只是想要得到用户输入的内容,还是用onChangeText比较合适。
2.3 keyboardType
keyboardType用于设置弹出软键盘的类型。它的取值为范围为: enum(‘default’, ‘email-address’, ‘numeric’, ‘phone-pad’, ‘ascii-capable’, ‘numbers-and-punctuation’, ‘url’, ‘number-pad’, ‘name-phone-pad’, ‘decimal-pad’, ‘twitter’, ‘web-search’) ,其中default、numeric、email-address和phone-pad是跨平台。
将keyboardType的值设置为phone-pad,效果如下图所示。
2.4 blurOnSubmit
如果blurOnSubmit值为true,文本框会在按下提交键时失去焦点。对于单行输入框,blurOnSubmit默认值为true,多行则为false。 在单行的情况下,点击键盘上的提交按钮时,TextInput的效果如下图所示。
将blurOnSubmit设置为false:
点击键盘上的提交按钮时,TextInput的效果如下图所示。
2.5 onSubmitEditing
当提交键被按下时会调用onSubmitEditing,如果multiline等于true,则此属性不可用。
运行程序并在App的开发菜单中选择Debug JS Remotely,这时我们输入Android并按下提交键,在Console控制台中就会输出结果。(笔者用的是WebStorm)
2.6 returnKeyType
用于设置软键盘回车键的样式,Android平台可以使用returnKeyLabel来设置软键盘回车键的内容。 returnKeyType的取值为enum(‘done’, ‘go’, ‘next’, ‘search’, ‘send’, ‘none’, ‘previous’, ‘default’, ‘emergency-call’, ‘google’, ‘join’, ‘route’, ‘yahoo’)。 其中跨平台的取值有:done、next、search、send。 Android平台独有:none、previous。 iOS平台独有:default、emergency-call、google、join、route、yahoo。 如果我们将returnKeyType设置为go时,效果如下图所示。
returnKeyType设置为send时,效果如下图所示。
2.7 其他跨平台属性
2.8 Android平台独有属性
2.9 iOS平台独有属性
3 方法
clear()
clear用于清空输入框的内容。 想要使用组件的方法则需要使用组件的引用,例子如下所示。
在TextInput标签中定义引用的名称:ref="textInputRefer"
,这样我们通过 this.refs.textInputRefer
就可以得到TextInput 组件的引用。在Button的onPress函数中,调用了TextInput的clear方法,这样当我们点击“清除”按钮时,文本框中的内容就会被清除。
isFocused(): boolean
返回值表明当前输入框是否获得了焦点。
好了,到这里TextInput组件就介绍到这里,还有一些没有列出的属性请查看官方文档。
- WordPress删除头部wp_head()多余代码
- 域名fde.com在国内平台以11万元被秒
- 微信小程序助力实体店对接互联网市场
- PostgreSQL 与 MySQL 相比,优势何在?
- Setting Up KeePass For Centos 6
- 拼音米大热!快视”、“冰冰”等多个域名结拍
- 入门必读:Hadoop新手学习指导
- 使用密码记录工具keepass来保存密码
- 机器人带着VR学习,最后学会了人工智能
- 超经典的JBOSS入门文章
- ASP.NET2.0应用中定制安全凭证
- AI造的AI,比人造的还厉害,该喜还是该忧?
- Mono 3.2 测试NPinyin 中文转换拼音代码
- Reactive Extensions介绍
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 我没学过计算机,是怎么接了四个私活还挣了两个 iPad 的?
- Helm安装Prometheus Operator
- 【每日一题】【vue2源码学习】vue如何检测数组的变化
- JavaScript 实现输入框内容一键复制(附上 Vue 3 实现方式)
- python 迭代器/iterator与生成器/generator的区别
- CSS 实现文本超出容器范围用省略号显示(单行+多行)
- ESP8266和ROS收发消息读取模拟量控制LED亮度
- 纯 CSS 实现下拉菜单尖角图标(实心+空心)
- 3分钟短文:书接上回,Laravel数据库迁移的那些个小技巧
- 解密 Docker 挂载文件,宿主机修改后容器里文件没有修改
- SAP Spartacus的单元测试目录结构
- 突击并发编程JUC系列-并发工具 CyclicBarrier
- 详解 | Linux系统是如何实现存储并读写文件的?
- Angular单元测试的一个错误消息
- Python进行特征提取