React Native - Input Teks

Dalam bab ini, kami akan menunjukkan kepada Anda cara bekerja dengan TextInput elemen di React Native.

Komponen Home akan mengimpor dan membuat input.

App.js

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

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

Masukan

Kami akan menentukan status awal.

Setelah menentukan status awal, kami akan membuat handleEmail dan handlePasswordfungsi. Fungsi-fungsi ini digunakan untuk memperbarui status.

Itu login() fungsi hanya akan mengingatkan nilai negara saat ini.

Kami juga akan menambahkan beberapa properti lain ke input teks untuk menonaktifkan kapitalisasi otomatis, menghapus batas bawah di perangkat Android, dan menyetel placeholder.

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

Setiap kali kita mengetik di salah satu bidang masukan, status akan diperbarui. Saat kami mengklikSubmit tombol, teks dari input akan ditampilkan di dalam kotak dialog.

Setiap kali kita mengetik di salah satu bidang masukan, status akan diperbarui. Saat kami mengklikSubmit tombol, teks dari input akan ditampilkan di dalam kotak dialog.