React Native iOS登录页Formik handleSubmit实现问题求助

核心错误点及修复 #

• handleSubmit未触发执行：登录按钮的onPress={() => handleSubmit}仅引用函数未执行，改为onPress={handleSubmit}或onPress={() => handleSubmit()}；注册按钮误用handleSubmit，需替换为页面跳转逻辑。
• 冗余本地State：Formik已通过values管理表单状态，删除额外声明的email、password useState，避免状态冲突。
• 密码输入框未关联Formik：给密码输入框添加onChangeText={handleChange('password')}和value={values.password}，并在Formik的initialValues中加入password: ''。
• 多余的onSubmitEditing逻辑：删除输入框中手动更新本地state的代码，Formik的handleChange已同步表单值。

修正后的完整代码 #

import React from 'react';
import { SafeAreaView, Text, TextInput, TouchableOpacity, View, StyleSheet } from 'react-native';
import { Formik } from 'formik';
import * as Yup from 'yup';

export default function Login() {
  const LoginSchema = Yup.object().shape({
    email: Yup.string().email('Invalid email').required('Email is required'),
    password: Yup.string().required('Password is required'),
  });

  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      onSubmit={(values) => {
        console.log('Form submitted:', values);
        // 在此添加登录请求逻辑
      }}
      validationSchema={LoginSchema}
    >
      {({ values, errors, handleChange, handleSubmit, touched }) => (
        <SafeAreaView style={styles.container}>
          <Text style={styles.title}>Login</Text>
          <View style={styles.inputContainer}>
            <TextInput
              style={styles.textInput}
              placeholder={'Email'}
              keyboardType='email-address'
              autoCapitalize='none'
              onChangeText={handleChange('email')}
              value={values.email}
            />
            {touched.email && errors.email && (
              <Text style={styles.errorText}>{errors.email}</Text>
            )}
          </View>
          <View style={styles.inputContainer}>
            <TextInput
              style={styles.textInput}
              placeholder={'Password'}
              secureTextEntry={true}
              autoCapitalize='none'
              onChangeText={handleChange('password')}
              value={values.password}
            />
            {touched.password && errors.password && (
              <Text style={styles.errorText}>{errors.password}</Text>
            )}
          </View>
          <TouchableOpacity style={styles.loginButton} onPress={handleSubmit}>
            <Text style={styles.loginText}>Login</Text>
          </TouchableOpacity>
          <View style={styles.signUp}>
            <Text>Don't have an account? </Text>
            <TouchableOpacity onPress={() => {
              // 在此添加跳转到注册页面的逻辑，如navigation.navigate('SignUp')
              console.log('Navigate to SignUp');
            }}>
              <Text style={styles.signUpButton}>Sign Up</Text>
            </TouchableOpacity>
          </View>
        </SafeAreaView>
      )}
    </Formik>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 30,
  },
  inputContainer: {
    marginBottom: 15,
  },
  textInput: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    padding: 12,
    fontSize: 16,
  },
  errorText: {
    color: 'red',
    fontSize: 12,
    marginTop: 5,
  },
  loginButton: {
    backgroundColor: '#007AFF',
    borderRadius: 8,
    paddingVertical: 12,
    alignItems: 'center',
    marginVertical: 20,
  },
  loginText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
  signUp: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
  signUpButton: {
    color: '#007AFF',
    fontWeight: 'bold',
  },
});

额外优化说明 #

• 给Yup校验规则添加required，完善必填项校验
• 密码输入框设置secureTextEntry={true}，符合密码输入常规需求
• 错误提示增加touched判断，仅在用户触碰输入框后显示错误，提升体验
• 补充基础样式，优化页面布局合理性

内容的提问来源于stack exchange，提问作者wang hao zhen