Skip to content

Commit

Permalink
improve text input docs
Browse files Browse the repository at this point in the history
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 facebook#8447

Differential Revision: D3491938

Pulled By: JoelMarcey

fbshipit-source-id: 3bd0f5762dc4db4a85c9d5badb6c005f4b8c52f4
  • Loading branch information
lacker authored and Facebook Github Bot 1 committed Jun 28, 2016
1 parent c2a995d commit 76f8f42
Showing 1 changed file with 10 additions and 7 deletions.
17 changes: 10 additions & 7 deletions docs/HandlingTextInput.md
Original file line number Diff line number Diff line change
Expand Up @@ -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: ''};
Expand All @@ -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).

0 comments on commit 76f8f42

Please sign in to comment.