TextInput是一個(gè)允許用戶輸入文本的基礎(chǔ)組件赡模。它有一個(gè)名為onChangeText的屬性加缘，此屬性接受一個(gè)函數(shù)锤悄，而此函數(shù)會(huì)在文本變化時(shí)被調(diào)用衣形。另外還有一個(gè)名為onSubmitEditing的屬性，會(huì)在文本被提交后（用戶按下軟鍵盤上的提交鍵）調(diào)用兔院。
假如我們要實(shí)現(xiàn)當(dāng)用戶輸入時(shí)殖卑，實(shí)時(shí)將其以單詞為單位翻譯為另一種文字。我們假設(shè)這另一種文字來(lái)自某個(gè)吃貨星球秆乳，只有一個(gè)單詞：??懦鼠。所以“Hello there Bob”將會(huì)被翻譯為“?? ?? ?? ”。
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>
);
}
}
運(yùn)行結(jié)果
在上面的例子里屹堰，我們把text保存到state中肛冶，因?yàn)樗鼤?huì)隨著時(shí)間變化。
TextInput可能是天然具有“動(dòng)態(tài)狀態(tài)”的最簡(jiǎn)單的組件了扯键。下面我們來(lái)看看另一類輸入組件睦袖，先從處理觸摸開始學(xué)習(xí)。
