diff --git a/docs/HandlingTextInput.md b/docs/HandlingTextInput.md index 9e40a7260..76ad648c5 100644 --- a/docs/HandlingTextInput.md +++ b/docs/HandlingTextInput.md @@ -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 { this.setState({text})} /> - {this.state.text.length} + + {this.state.text.split(' ').map((word) => word && '🍕').join(' ')} + ); } } -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).