Native reagieren - Texteingabe

In diesem Kapitel zeigen wir Ihnen, wie Sie damit arbeiten TextInput Elemente in React Native.

Die Home-Komponente importiert und rendert Eingaben.

App.js.

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

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

Eingänge

Wir werden den Ausgangszustand definieren.

Nachdem wir den Ausgangszustand definiert haben, erstellen wir den handleEmail und die handlePasswordFunktionen. Diese Funktionen werden zum Aktualisieren des Status verwendet.

Das login() Die Funktion alarmiert nur den aktuellen Wert des Status.

Wir werden den Texteingaben auch einige andere Eigenschaften hinzufügen, um die automatische Großschreibung zu deaktivieren, den unteren Rand auf Android-Geräten zu entfernen und einen Platzhalter festzulegen.

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'
   }
})

Immer wenn wir eines der Eingabefelder eingeben, wird der Status aktualisiert. Wenn wir auf klickenSubmit Schaltfläche, Text von Eingaben wird im Dialogfeld angezeigt.

Immer wenn wir eines der Eingabefelder eingeben, wird der Status aktualisiert. Wenn wir auf klickenSubmit Schaltfläche, Text von Eingaben wird im Dialogfeld angezeigt.