TextInput是一個允許用戶輸入文本的基本組件狱意。它有一個onChangeText屬性其屏，它在每次文本改變時都會調(diào)用一個函數(shù)臭脓，而onSubmitEditing屬性在提交文本時會調(diào)用一個函數(shù)镜盯。
例如尸昧，假設(shè)用戶鍵入的內(nèi)容是將他們的單詞翻譯為不同的語言揩页。在這種新的語言中，每一個單詞都以相同的方式寫成：??烹俗。所以句子“你好爆侣，鮑勃”將被翻譯為“??????”。
import React, { Component } from 'react';
import { Text, TextInput, View } from 'react-native';
export default 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>
);
}
}
image.png
在這個例子中幢妄，我們將文本存儲在狀態(tài)中兔仰，因為它隨時間而改變。
