如何在React Native中通过单击一次提交验证所有输入

import React, { useState } from 'react';
import { View, TextInput, Button, Text } from 'react-native';

const FormComponent = () => {
  const [state, setState] = useState({
    email: '',
    password: '',
    confirmPassword: '',
    emailError: '',
    passwordError: '',
    confirmPasswordError: '',
  });

  const handleInputChange = (field, value) => {
    setState((prevState) => ({
      ...prevState,
      [field]: value,
    }));
  };

  const handleSubmit = () => {
    let isValid = true;

    // 验证邮箱
    if (!state.email) {
      setState((prevState) => ({
        ...prevState,
        emailError: '邮箱不能为空',
      }));
      isValid = false;
    } else {
      // 使用正则表达式验证邮箱格式
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(state.email)) {
        setState((prevState) => ({
          ...prevState,
          emailError: '请输入有效的邮箱地址',
        }));
        isValid = false;
      } else {
        setState((prevState) => ({
          ...prevState,
          emailError: '',
        }));
      }
    }

    // 验证密码
    if (!state.password) {
      setState((prevState) => ({
        ...prevState,
        passwordError: '密码不能为空',
      }));
      isValid = false;
    } else {
      // 密码长度至少为8位
      if (state.password.length < 8) {
        setState((prevState) => ({
          ...prevState,
          passwordError: '密码长度至少为8位',
        }));
        isValid = false;
      } else {
        setState((prevState) => ({
          ...prevState,
          passwordError: '',
        }));
      }
    }

    // 验证确认密码
    if (state.password !== state.confirmPassword) {
      setState((prevState) => ({
        ...prevState,
        confirmPasswordError: '两次输入的密码不一致',
      }));
      isValid = false;
    } else {
      setState((prevState) => ({
        ...prevState,
        confirmPasswordError: '',
      }));
    }

    // 如果所有验证通过，可以进行后续操作
    if (isValid) {
      // 执行提交操作
      // ...
    }
  };

  return (
    <View>
      <TextInput
        placeholder="邮箱"
        value={state.email}
        onChangeText={(value) => handleInputChange('email', value)}
      />
      {state.emailError ? <Text>{state.emailError}</Text> : null}

      <TextInput
        placeholder="密码"
        secureTextEntry
        value={state.password}
        onChangeText={(value) => handleInputChange('password', value)}
      />
      {state.passwordError ? <Text>{state.passwordError}</Text> : null}

      <TextInput
        placeholder="确认密码"
        secureTextEntry
        value={state.confirmPassword}
        onChangeText={(value) => handleInputChange('confirmPassword', value)}
      />
      {state.confirmPasswordError ? (
        <Text>{state.confirmPasswordError}</Text>
      ) : null}

      <Button title="提交" onPress={handleSubmit} />
    </View>
  );
};

export default FormComponent;