React Native - Input di testo

In questo capitolo ti mostreremo come lavorare con TextInput elementi in React Native.

Il componente Home importerà e visualizzerà gli input.

App.js

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

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

Ingressi

Definiremo lo stato iniziale.

Dopo aver definito lo stato iniziale, creeremo il file handleEmail e il handlePasswordfunzioni. Queste funzioni vengono utilizzate per aggiornare lo stato.

Il login() la funzione avviserà solo il valore corrente dello stato.

Aggiungeremo anche alcune altre proprietà agli input di testo per disabilitare le maiuscole automatiche, rimuovere il bordo inferiore sui dispositivi Android e impostare un segnaposto.

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

Ogni volta che digitiamo in uno dei campi di input, lo stato verrà aggiornato. Quando facciamo clic sul fileSubmit pulsante, il testo degli input verrà mostrato all'interno della finestra di dialogo.

Ogni volta che digitiamo in uno dei campi di input, lo stato verrà aggiornato. Quando facciamo clic sul fileSubmit pulsante, il testo degli input verrà mostrato all'interno della finestra di dialogo.