mirror of
https://github.com/status-im/react-native.git
synced 2025-01-15 03:56:03 +00:00
b1e49832ef
Summary: We had rendering support for prev links, but we never had any previous links in our metadata. Only next links. This adds that support to both Guides and APIs. **For guides**: `previous` is manually inserted into the metadata of the actual markdown file. **For APIs/Components**: `previous` is established via code within `extractDocs.js` > This isn't totally perfect. For example, the transition from the last guide to the first API/component has a next link from the guide, but not a previous link from the API since the way you get the previous links are different from guides and APIs. But this gets us really close. Closes https://github.com/facebook/react-native/pull/8754 Differential Revision: D3557972 Pulled By: hramos fbshipit-source-id: e270bb51e7a4f59f61dad28ae0928d27d0af3d4a
51 lines
2.1 KiB
Markdown
51 lines
2.1 KiB
Markdown
---
|
|
id: handling-text-input
|
|
title: Handling Text Input
|
|
layout: docs
|
|
category: The Basics
|
|
permalink: docs/handling-text-input.html
|
|
next: using-a-scrollview
|
|
previous: flexbox
|
|
---
|
|
|
|
[`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, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted.
|
|
|
|
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 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 && '🍕').join(' ')}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);
|
|
```
|
|
|
|
In this example, we store `text` in the state, because it changes over time.
|
|
|
|
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).
|