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