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 ข้อความจากอินพุตจะแสดงภายในกล่องโต้ตอบ