React Native - ввод текста

В этой главе мы покажем вам, как работать с TextInput элементы в React Native.

Компонент Home будет импортировать и отображать входные данные.

App.js

import React from 'react';
import Inputs from './inputs.js'

const App = () => {
   return (
      <Inputs />
   )
}
export default App

Входы

Определим начальное состояние.

После определения начального состояния мы создадим handleEmail и handlePasswordфункции. Эти функции используются для обновления состояния.

В login() функция просто предупредит о текущем значении состояния.

Мы также добавим некоторые другие свойства для ввода текста, чтобы отключить автоматическое использование заглавных букв, удалить нижнюю границу на устройствах Android и установить заполнитель.

inputs.js

import React, { Component } from 'react'
import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'

class Inputs extends Component {
   state = {
      email: '',
      password: ''
   }
   handleEmail = (text) => {
      this.setState({ email: text })
   }
   handlePassword = (text) => {
      this.setState({ password: text })
   }
   login = (email, pass) => {
      alert('email: ' + email + ' password: ' + pass)
   }
   render() {
      return (
         <View style = {styles.container}>
            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Email"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {this.handleEmail}/>
            
            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Password"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {this.handlePassword}/>
            
            <TouchableOpacity
               style = {styles.submitButton}
               onPress = {
                  () => this.login(this.state.email, this.state.password)
               }>
               <Text style = {styles.submitButtonText}> Submit </Text>
            </TouchableOpacity>
         </View>
      )
   }
}
export default Inputs

const styles = StyleSheet.create({
   container: {
      paddingTop: 23
   },
   input: {
      margin: 15,
      height: 40,
      borderColor: '#7a42f4',
      borderWidth: 1
   },
   submitButton: {
      backgroundColor: '#7a42f4',
      padding: 10,
      margin: 15,
      height: 40,
   },
   submitButtonText:{
      color: 'white'
   }
})

Каждый раз, когда мы вводим одно из полей ввода, состояние будет обновляться. Когда мы нажимаем наSubmit кнопка, текст из входов будет показан внутри диалогового окна.

Каждый раз, когда мы вводим одно из полей ввода, состояние будет обновляться. Когда мы нажимаем наSubmit кнопка, текст из входов будет показан внутри диалогового окна.