React Native 之 Handling Text Input

---

TextInput是一个基本组件,允许用户输入文本。它有一个onChangeText prop ,当文本改变调用的函数,每次文本提交时调用onSubmitEditing prop 。

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 && '6666').join(' ')}        </Text>      </View>    );  }}AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);

在本例中,我们将文本存储在state,因为它会随着时间而改变。

你可能用文本输入有很多事情想做。例如,您可以验证文本内部,用户类型。的更详细的示例,请参见控制组件或 TextInput。

文本输入可能是最简单的例子,一个组件的状态自然会随着时间而改变。接下来,让我们看看另一种类型的组件是一个控制布局,并了解滚动视图。

---

关注公众号：

                       

                                              更多精彩文章等你来！！！

---

[1]:参考文献 http://facebook.github.io/react-native/docs/handling-text-input.html