RN开发之如何使用TextInput组件来处理用户输入
2019-10-11 本文已影响0人
一只西西狸
TextInput是一个允许用户输入文本的基础组件。它有一个名为onChangeText
的属性,此属性接受一个函数,而此函数会在文本变化时被调用。另外还有一个名为onSubmitEditing
的属性,会在文本被提交后(用户按下软键盘上的提交键)调用。
假如我们要实现当用户输入时,实时将其以单词为单位翻译为另一种文字。我们假设这另一种文字来自某个吃货星球,只有一个单词:🍕。所以“Hello there Bob”将会被翻译为“🍕 🍕 🍕 ”。
import React, { Component } from 'react';
import { Text,TextInput, View } from 'react-native';
export default class PizzaTranslator extends Component{
render{
return(
<View style={{padding:10}}>
<TextInput
style={{height:40}}
placeholder="type here to translate!"
onChangeText={(text)=>this.setState({text})}
value={this.state.text}
/>
<Text style={{padding:10,fontSize:42}}>
{this.state.split('').map((word)=>word&&'🍕').join('')}
</Text>
</View>
);
}
}
运行结果
在上面的例子里,我们把text保存到state中,因为它会随着时间变化。
TextInput可能是天然具有“动态状态”的最简单的组件了。下面我们来看看另一类输入组件,先从处理触摸开始学习。