TextInput组件(绑定事件)
来源:互联网 发布:2014年程序员考试真题 编辑:程序博客网 时间:2024/06/05 00:11
搜索框
在输入框中输入,点击搜索获取搜索款的 value
代码实现
//TextInput组件(绑定事件)import React, {Component} from 'react';import { AppRegistry, StyleSheet, Text, View, TextInput, TouchableOpacity} from 'react-native';/* TextInput 是一个允许用户在应用中通过键盘输入文本的基本组件. 本组件的属性提供了多种特性的配置,譬如自动完成,自动大小写,占位文字,以及多种不同的键盘类型(如纯数字键盘)等等 常用: placeholder 占位符 value 输入框的值 password 是否密文输入 editable 输入框是否可编辑 returnKeyType 键盘return键的类型 onChange 当文本变化时调用 onEndEditing 当结束编辑时调用 onSubmitEditing 当结束编辑,点击提交按钮时调用 ...... */// 组件var HelloReactNative = React.createClass({ getInitialState: function () { return { inputText: " " }; }, //输入框的 onChange 实现 getContent: function (text) { this.setState({ inputText: text }); }, clickBtn: function () { alert(this.state.inputText); }, render: function () { return ( <View style={styles.container}> <View style={styles.flex}> <TextInput style={styles.input} returnKeyType="search" placeholder="请输入内容" onChangeText={this.getContent} enablesReturnKeyAutomatically="ture" onSubmitEditing={this.clickBtn} > </TextInput> </View> <TouchableOpacity style={styles.btn} onPress={this.clickBtn}> <Text style={styles.search}>搜索</Text> </TouchableOpacity> </View> ); }});//样式var styles = StyleSheet.create({ container: { flexDirection: "row", height: 45, marginTop: 25 }, flex: { flex: 1 }, input: { height: 45, borderWidth: 1, marginLeft: 5, paddingLeft: 5, borderColor: "#CCC", borderRadius: 4 }, btn: { width: 55, marginLeft: 5, marginRight: 5, backgroundColor: "#2873ff", height: 45, justifyContent: "center", alignItems: "center" }, search: { color: "#FFF", fontSize: 15, fontWeight: "bold" }});AppRegistry.registerComponent('HelloReactNative', () => HelloReactNative);
属性方法
属性
方法:
1.isFocused()
返回值是boolean,判断当前TextInput组件当前是否获得焦点2.clear() 移除所有输入的文本从TextInput组件。
阅读全文
0 0
- TextInput组件(绑定事件)
- TouchableOpacity组件(绑定事件)
- knockoutjs十二 textInput绑定
- ReactNative TextInput 组件
- TextInput组件和Touchable组件
- DOM3 textInput事件-softbar
- DOM3 textInput事件-softbar
- TextInput双向绑定ContainerController出错
- TextInput组件练习 - QQLogin界面
- React Native 组件之TextInput
- VueJS--给组件绑定原生事件
- Cpage.js给组件绑定事件
- Flex---TextInput keyDown事件应用
- #630 – PreviewTextInput 和TextInput 事件(PreviewTextInput and TextInput Events)
- Vue组件绑定自定义事件(子向父传递事件)
- TextInput
- React-Native TextInput组件的主要属性
- React Native 组件 --TextInput处理文本输入
- 20170617Windows10_02_线程传参、时间片及线程启动退出
- Linux 设置apache,mysql开机启动
- GraphicsMagick+Lua
- 函数:定义一个函数,接收一个学生的分数数组,返回平均分
- Poll机制
- TextInput组件(绑定事件)
- CentOS7搭建FastDFS V5.11分布式文件系统及Java整合详细过程(二)
- 进口NFC,运放,时间数字转换 芯片替代
- tomcat性能调优
- centos 安装 redis3.0.0 集群
- Tomcat安装详细步骤
- 函数:输出某一个范围数字中的所有质数
- C白白的游戏服务器开发笔记:安装protobuf
- 欢迎使用CSDN-markdown编辑器