React native (5) 处理文本输入
2017-04-10 11:35
435 查看
在上面的例子里,我们把text保存到state中,因为它会随着时间变化。
文本输入方面还有很多其他的东西要处理。比如你可能想要在用户输入的时候进行验证,在React的表单组件中的受限组件一节中有一些详细的示例(注意react中的onChange对应的是rn中的onChangeText)。此外你还需要看看TextInput的文档。
文本输入方面还有很多其他的东西要处理。比如你可能想要在用户输入的时候进行验证,在React的表单组件中的受限组件一节中有一些详细的示例(注意react中的onChange对应的是rn中的onChangeText)。此外你还需要看看TextInput的文档。
constructor(props){ super(props); //定义一个 myText 变量,用来存放输入框输入的值 this.state={myText : ''} } render(){ return ( <View style={{padding:10, flex:1}}> <TextInput style={{width:200,height:100}} placeholder="please input data" //在输入变动的时候,将最新的输入内容存到state里面去 onChangeText={(myText) => this.setState({myText})}> </TextInput> //将值转换后输出 <Text>{this.state.myText.split(' ').map((word) => word && '��').join(' ')}</Text> </View> ); }
相关文章推荐
- React Native 学习笔记八(文本输入的处理)
- React Native 组件 --TextInput处理文本输入
- 【React Native开发】- TextInput键盘输入文本
- React Native 处理TextInput在输入后,点击布局空白处软件盘能弹出和收回。
- react-native试玩(22)-文本输入框
- 混合开发的大趋势之一React Native TextInput (文本输入)
- 混合开发的大趋势之一React Native TextInput (文本输入)
- React Native 触摸事件处理详解
- reactnative 中关于小米文案的被截断的处理方案
- React-Native 学习之--问题处理 一. github上下载的项目不能运行?
- UITextView文本输入限定的处理
- 第八章 Libgdx输入处理(5)简单文本输入
- React-Native中处理ListView上拉加载更多
- 第八章 Libgdx输入处理(5)简单文本输入
- React-Native:(多行文本)ios端将键盘回车改为确定键
- 《React-Native系列》42、键盘遮挡问题官方处理方法KeyboardAvoidingView
- 7,文本处理、重定向、管道、bash算术运算、脚本 输入
- 01-替换输入文本的空格和换行(字符串处理)
- react-native试玩(21)-文本控件
- React Native ios 设置状态栏文本颜色