mirror of
https://github.com/status-im/react-native.git
synced 2025-01-14 19:44:13 +00:00
f42f2dff37
Summary: Finally, a place where `Button` is properly introduced. This is based on the old Handling Touches guide, which has been simplified (with some content moved over to the scroll views tutorial). I've also updated the ordering of the guides into something that makes more sense to someone just getting started with React Native. Closes https://github.com/facebook/react-native/pull/14371 Differential Revision: D5201127 Pulled By: hramos fbshipit-source-id: 819192e2db9febb8a315f51693dae557752b6002
52 lines
2.1 KiB
Markdown
52 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: handling-touches
|
|
previous: flexbox
|
|
---
|
|
|
|
[`TextInput`](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';
|
|
|
|
export default 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>
|
|
);
|
|
}
|
|
}
|
|
|
|
// skip this line if using Create React Native App
|
|
AppRegistry.registerComponent('AwesomeProject', () => 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](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 one that controls layout, and [learn about the ScrollView](docs/using-a-scrollview.html).
|