TextInput
TextInput
/*
* TextInput 是一个允许用户在应用中通过键盘输入文本的基本组件
* 本组件的属性提供了多种特性的配置,如自动完成,自动大小写,占位文字,键盘类型等
* 常用:
* placeholder 占位符
* value 输入框的值
* password 是否密文输入
* editable 是否可编辑
* retureKeyType 键盘return键类型
* onChange 当文本变化时调用(绑定事件)
* onEndEditing 当结束编辑时调用
* onSubmitEditding 当结束编辑,点击提交按钮时调用
*
*
* 练习:点击搜索, alert显示 输入框的值
*
* */ var LessionTextInput = React.createClass({ getInitialState:function () {
return{
inputText:""
}
},
//输入框的onChange事件,有一个参数
getContennt:function (text) {
this.setState({
inputText:text
});
}, //按钮事件
clickBtn:function () {
alert(this.state.inputText)
}, render:function () {
return(
<View sytle={styles.container}>
<View style={styles.flex}>
<TextInput
style={styles.input}
returnKeyType="search"
placeholder="请输入内容"
onChangeText={this.getContennt}
/>
</View>
<TouchableOpacity style={styles.btn}>
<Text style={styles.search} onPress={this.clickBtn}>搜索</Text>
</TouchableOpacity>
</View>
);
}
}); var styles = StyleSheet.create({
container:{
flexDirection:"row",
height:45,
marginTop:25
},
flex:{
flex:1
},
input:{
height:45,
borderWidth:1,
borderColor:"#CCC",
borderRadius:4,
marginLeft:5,
padding:5,
},
btn:{
width:55,
marginLeft:5,
marginRight:5,
backgroundColor:"blue",
height:45,
justifyContent:"center",
alignItems:"center"
},
search:{
color:"#FFF"
}
});
TextInput的更多相关文章
- React Native 之 TextInput使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- react-native 学习之TextInput组件篇
/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; import Rea ...
- react native TextInput
今天我想说一下react native中的一个控件,TextInput 翻译过来就是文本输入,对应着android中的EditText.我们先看一下官方是怎样描述的.TextInput是一个允许用户在 ...
- KnockoutJS 3.X API 第四章 表单绑定(10) textInput、hasFocus、checked绑定
textInput绑定目的 textInput绑定主要用于<input>或者<textarea>元素.他提供了DOM和viewmodel的双向更新.不同于value绑定,tex ...
- React Native 组件之TextInput
React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性. /** * Sa ...
- [React Native] State and Touch Events -- TextInput, TouchableHighLight
In React, components manage their own state. In this lesson, we'll walk through building a component ...
- Flex TextInput的restrict属性应用
1,<mx:TextInput id="test_ti" width="160" maxChars="20" restrict=&qu ...
- Flex TextInput 动态推断输入内容
Flex TextInput 动态推断输入内容 <? xml version="1.0" encoding="utf-8"?> <s:Appl ...
- 记VUE的v-on:textInput无法执行事件的BUG
<div id="wrap"> <input type="text" v-on:textInput="fn"> &l ...
- React Native随笔——组件TextInput
一.实例 先看一下我要做的搜索框的样子 需要一个Image,和一个TextInput 去掉默认下划线 underlineColorAndroid='transparent' 设置光标颜色 select ...
随机推荐
- sklearn中的cross_val_score()函数
sklearn.cross_validation.cross_val_score(estimator, X, y=None, scoring=None, cv=None, n_jobs=1, verb ...
- alsa-lib及alsa-utils成功移植(原…
准备工作 alsa-lib版本:alsa-lib-1.0.23.tar.bz2 alsa-util版本:alsa-utils-1.0.23.tar.bz2 其他版本的alsa-lib和alsa-uti ...
- consul watch
consul watch -type key -key mhc ./key_handler.py [root@mhc consul]# cat key_handler.py #!/usr/bin/py ...
- 使用GDB调试PHP代码,解决PHP代码死循环
最近在帮同事解决Swoole Server问题时,发现有1个worker进程一直处于R的状态,而且CPU耗时非常高.初步断定是PHP代码中发生死循环. 下面通过一段代码展示如何解决PHP死循环问题. ...
- Linux 程序和进程的关系
查看进程命令 ps ps -elf|grep init|grep -v grep 查看init进程ID号:ps aux |grep init |grep -v grep; ps aux 会把系统所有 ...
- spring aop自动代理注解配置之二
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- linux删除文件后磁盘空间未释放的问题
很可能是该文件还被其它进程使用. 使用: lsof | grep deleted | grep $FILE_NAME 可以看到正使用该文件的进程,将之kill即可.也可以查看进程来验证: ls -l ...
- How to Choose the Best Way to Pass Multiple Models in ASP.NET MVC
Snesh Prajapati, 8 Dec 2014 http://www.codeproject.com/Articles/717941/How-to-Choose-the-Best-Way-to ...
- javascrip总结12:逻辑运算符与等号运算符
1 逻辑运算符 逻辑运算的结果只有true 或者 false. 1.1 与&&: 两个表达式为true的时候,结果为true. 1.2 或|| 只要有一个表达式为true,结果为tru ...
- web大文件上传控件-监控fd_create流程-Xproer.HttpUploader6
监控fd_create流程 1.打开ie,f12 2.启动网络监控 点击开始捕获 上传文件夹,然后查看监控 将监控信息转到详细视图