React Native中TextInput无法输入文本的问题求助
React Native中TextInput无法输入文本的问题求助
我最近刚开始接触React Native,想做一个简单的表单,但不知道为什么,文本输入框没法输入内容。我已经试过用打印语句排查,也检查了错误,但终端里既没输出打印信息也没报错,有没有大佬能帮忙看看问题出在哪呀?
import React, { useState } from 'react'; import { View, Text, TextInput, Button, StyleSheet, Alert } from 'react-native'; const SimpleForm = () => { const [formData, setFormData] = useState({ //formData holds form data, setFormData updates formData name: '', airport: '', // initial states of all data gateNumber: '', }); const handleChange = (field, value) => { // field = name of input(name, airport, gatenum), value = val entered console.log(`Updating ${field} with value: ${value}`); setFormData(prevData => ({ //update form in specific field ...prevData, [field]: value, })); }; const handleSubmit = () => { console.log('Form submitted:', formData); Alert.alert('Form Submitted', `Name: ${formData.name}\nAirport: ${formData.airport}\nGate Number: ${formData.gateNumber}`); }; return ( <View style={styles.container}> <Text style={styles.label}>Name:</Text> <TextInput style={styles.input} placeholder="Enter your name" value={formData.name} onChangeText={value => handleChange('name', value)} /> <Text style={styles.label}>Airport:</Text> <TextInput style={styles.input} placeholder="Enter airport name" value={formData.airport} onChangeText={value => handleChange('airport', value)} /> <Text style={styles.label}>Gate Number:</Text> <TextInput style={styles.input} placeholder="Enter gate number" value={formData.gateNumber} onChangeText={value => handleChange('gateNumber', value)} /> <View style={styles.buttonContainer}> <Button title="Submit" onPress={handleSubmit} color="#4CAF50" /> </View> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, padding: 20, backgroundColor: '#f5f5f5', justifyContent: 'center', }, label: { fontSize: 16, fontWeight: 'bold', marginBottom: 5, color: '#333', }, input: { height: 40, borderColor: '#ccc', borderWidth: 1, marginBottom: 15, paddingHorizontal: 10, borderRadius: 5, backgroundColor: '#fff', }, buttonContainer: { marginTop: 20, }, }); export default SimpleForm;
备注:内容来源于stack exchange,提问作者user25533071
相关产品推荐
相关产品推荐

