status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

improve text input docs 

Summary:
Not a big deal, I was just going through the tutorial trying to figure out which doc was the most boring, and improve it a bit. IMO now the example is slightly funnier, and it mentions onSubmitEditing which in practice is probably a more useful callback.
Closes https://github.com/facebook/react-native/pull/8447

Differential Revision: D3491938

Pulled By: JoelMarcey

fbshipit-source-id: 3bd0f5762dc4db4a85c9d5badb6c005f4b8c52f4
This commit is contained in:
Kevin Lacker 2016-06-27 18:57:16 -07:00 committed by Facebook Github Bot 1
parent c2a995d9df
commit 76f8f42615
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
docs/HandlingTextInput.md
View File

@ -8,15 +8,16 @@ next: using-a-scrollview
---
[`TextInput`](/react-native/docs/textinput.html#content) is a basic component that allows the user to enter text. It has an `onChangeText` prop that takes
a function to be called every time the text changed.
a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted.
This example shows how to count the number of characters that have been typed in a box.
For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated
as "🍕🍕🍕".
```ReactNativeWebPlayer
import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';
class CharacterCounter extends Component {
class PizzaTranslator extends Component {
constructor(props) {
super(props);
this.state = {text: ''};
@ -27,20 +28,22 @@ class CharacterCounter extends Component {
<View style={{padding: 10}}>
<TextInput
style={{height: 40}}
placeholder="Pleeeease type on me!"
placeholder="Type here to translate!"
onChangeText={(text) => this.setState({text})}
/>
<Text style={{padding: 10}}>{this.state.text.length}</Text>
<Text style={{padding: 10, fontSize: 42}}>
{this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
</Text>
</View>
);
}
}
AppRegistry.registerComponent('CharacterCounter', () => CharacterCounter);
AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);
```
In this example, we store `text` in the state, because it changes over time.
There are a lot more advanced things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://facebook.github.io/react/docs/forms.html), or the [reference docs for TextInput](/react-native/docs/textinput.html).
There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://facebook.github.io/react/docs/forms.html), or the [reference docs for TextInput](/react-native/docs/textinput.html).
Text input is probably the simplest example of a component whose state naturally changes over time. Next, let's look at another type of component like this is one that controls layout, and [learn about the ScrollView](/react-native/docs/using-a-scrollview.html).