首页 > 代码库 > 3.文本框处理
3.文本框处理
参考:http://reactnative.cn/docs/0.31/handling-text-input.html#content
1.TextInput类似于OC中的UITextField和UITextView。一个可以让用户输入文本的基础组件。它有一个名为onChangeText的属性, 此属性接收一个函数,这个函数会在属性值变化的时候调用,类似于OC中键值观察, KVO机制。 相当于dideditChangeTextControlEvent事件有着同样的作用。
另外还有一个名为OnSubmitEditing的属性。会在文本提交后应用。按下键盘上的提交按钮,相当于UITextField中 的didEndOnExit事件。
栗子:
import React, { Component } from ‘react‘;import { AppRegistry, Text, TextInput, View } from ‘react-native‘;class PizzaTranslator extends Component { constructor(props) { super(props); this.state = {text: ‘‘}; } render() { return ( <View style={{padding: 10}}> <TextInput style={{height: 40}} placeholder="Type here to translate!" onChangeText={(text) => this.setState({text})} /> <Text style={{padding: 10, fontSize: 42}}> {this.state.text.split(‘ ‘).map((word) => word && ‘??‘).join(‘ ‘)} </Text> </View> ); }}// 注册应用(registerComponent)后才能正确渲染// 注意:只把应用作为一个整体注册一次,而不是每个组件/模块都注册AppRegistry.registerComponent(‘PizzaTranslator‘, () => PizzaTranslator);
3.文本框处理
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。