You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.14 16:58:08