使用屏幕导航时无法在 TextInput 上输入内容

Question

我使用 firebase 进行身份验证和数据库，然后我尝试在代码中添加导航屏幕，但现在我无法在 textInput 上键入内容。有人有想法吗？这是我的代码：

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { View, TextInput, Text, Button, Alert, StyleSheet } from 'react-native';
import { db, firestore, auth } from './firebaseConfig';
import { createUserWithEmailAndPassword, signOut } from 'firebase/auth';
import { signInWithEmailAndPassword } from 'firebase/auth';
import {ref, set, get, onValue, Database} from 'firebase/database';
import {doc, setDoc, getDoc, onSnapshot} from 'firebase/firestore';

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';



export default function App() {

    const [loginEmail, setLoginEmail] = useState('');
    const [loginPassword, setLoginPassword] = useState('');
    const [loggedIn, setLoggedIn] = useState(false);
 
   loginWithFirebase = (navigation) => {
    console.log(loginEmail);
    console.log(loginPassword);
    if(loginEmail.length < 4){
      Alert.alert("Please enter a valid email address");
      return;
    }
    if(loginPassword.length <4){
      Alert.alert("Please enter a valid password");
      return;
    }
}
  
  const Stack = createNativeStackNavigator();

HomeScreen = ({navigation}) =>{
  return (
    <View style={styles.container}>
      <View>
          <Text>Sign in with Firebase</Text>
          <TextInput
            onChangeText={value=>setLoginEmail(value)}
            autoCapitalize='none'
            autoCorrect = {false}
            keyboardType='email-address'
            placeholder='Email'
            style={styles.textInput}
          />
          <TextInput
            onChangeText={value => setLoginPassword(value)}
            autoCapitalize='none'
            autoCorrect = {false}
            keyboardType='visible-password'
            placeholder='Password'
            secureTextEntry = {true}
            style={styles.textInput}
          />
          <View style={styles.buttonContainer}>
            <Button  style={styles.button} title="Login" onPress={loginWithFirebase} />
          </View>

          <View style={styles.buttonContainer}>
            <Button  style={styles.button} title="Register" onPress={()=>navigation.navigate('Register')} />
          </View>
        </View>
    </View>
  );
  
  RegisterScreen = ({navigation}) =>{
  ...
  }
  
  return (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Register" component={RegisterScreen} />
      <Stack.Screen name="Login" component={LoginScreen} />
    </Stack.Navigator>
  </NavigationContainer>
);
}

我尝试执行

  onChange={e => setLoginEmail(e.target.value)}

但是当我单击按钮时，

loginEmail

值将变为未定义。

Answer 1

在反应中，当您通过状态值处理输入更改时，您还需要将 value 属性设置为输入 例如，如果您使用 onChange={e => setLoginEmail(e.target.value)} 那么您还需要将 value 属性设置为输入，即 value={your_state_value} 您的情况下是登录电子邮件