javascript - React Native - 为什么当我将 textInput 分配给 onchange 时单击按钮时才会出现错误？

Question

我在做一些项目时遇到了一些问题。

import React,{Component} from "react";
import {StyleSheet,Text,View,TextInput, 
TouchableOpacity,Keyboard,KeyboardAvoidingView,Image} from "react-native";
import {reduxForm,Field} from "redux-form";

const validate = values =>{
const errors = {};
emailform = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/i
if(!values.email){
    errors.email="not correct format for email address"
}else
    if(!emailform.test(values.email)){
        errors.email="not correct format for email address"
    }

if(!values.password){
    errors.password="please use at least 6 - 12 characters"
}else
    if(values.password.length < 6 || values.password.length > 12){
        errors.password="please use at least 6 - 12 characters"
    }

return errors;
}

const myField = ({label, placeholder ,meta:{error, touched}, input:{onChange}}) =>{
return(
    <View>
    <Text style={styles.inputlabel}> {(label)} </Text>
      <TextInput 
        style={styles.input}
        onChangeText={onChange}
      />
      {touched && (error && (<Text style={styles.errormessage}>{error}</Text>))}
    </View>
);
}

const submit = values =>{
alert('Login Success!');
}

const myFormCom = props=>{
const {handleSubmit, invalid} = props;
return(

    <KeyboardAvoidingView behavior="padding" style={styles.container}>
    <View style={styles.logoContainer}>
      <Image 
        style={styles.logo}
        source={require('./src/images/Logo.png')}
        />
    </View>
    <View style={styles.formContainer}>

    <Field
        name="email"
        component={myField}
        label="Email"
    />

     <Field
        name="password"
        component={myField}
        label="Password"
    />

      <TouchableOpacity 
        style={styles.buttonContainer}
        onPress={handleSubmit(submit)}
        //disabled={invalid}
        >
          <Text 
            style={styles.btnLabel}> 
              Sign In 
          </Text>
      </TouchableOpacity>
    </View>
    </KeyboardAvoidingView>
  )
}

const LoginForm = reduxForm({
form: 'something',
validate
})(myFormCom);


const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#faf8ff',
},
logoContainer:{
flexGrow: 1,
alignItems: 'center',
marginTop: 80,
},
logo:{
height: 100
},
formContainer:{
marginBottom: 30
},
input:{
height: 40,
backgroundColor: '#faf8ff',
marginLeft: 20,
marginRight: 20,
paddingLeft: 10,
borderWidth: 2,
borderColor: '#9d81d0',
borderRadius: 5
},
inputlabel:{
marginLeft: 20,
fontSize: 16,
fontWeight: '500',
marginBottom: 4
},
buttonContainer:{
backgroundColor: '#704db2',
marginLeft: 20,
marginRight: 20,
alignItems: 'center',
borderRadius: 5,
marginTop: 15
},
btnLabel:{
fontSize: 20,
color: '#fff',
fontWeight: 'bold',
padding: 10,

},
errormessage: {
color: 'red',
marginLeft: 20,
fontSize:14
}
});

export default LoginForm;

我想要的只是如果发生一些错误，按钮将被禁用，但当按钮未单击时，我的错误无法显示。那个怎么样？有人可以向我解释吗？抱歉，我在 react native 和 JavaScript 方面不太擅长；我还在学习我的东西哈哈

顺便说一句，我在 myField 中声明它在 textInput 中是 onChange ，所以如果文本发生变化，它会发生变化吗？但是为什么我的错误只在我点击登录按钮时才显示？即使尚未单击按钮，我如何才能正确显示错误。

标签： javascriptandroidreact-nativeloginredux