React Native中如何在Formik表单提交成功后调用函数？

Formik的onSubmit回调是处理表单提交逻辑的核心，你可以在这里完成提交操作后直接调用目标函数。以下分两种常见场景说明：

1. 同步提交场景 #

如果你的表单提交逻辑是同步操作（比如本地数据处理），直接在onSubmit里完成逻辑后调用函数即可：

import { View, Button, TextInput, Text } from 'react-native';
import { Formik } from 'formik';

const MyForm = () => {
  // 提交成功后要执行的函数
  const afterSubmit = () => {
    console.log('表单提交成功！执行后续操作');
    // 这里可以添加你的业务逻辑，比如跳转页面、显示成功提示等
  };

  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      // 表单验证逻辑
      validate={values => {
        const errors = {};
        if (!values.email) errors.email = '请输入邮箱';
        else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
          errors.email = '邮箱格式不正确';
        }
        if (!values.password) errors.password = '请输入密码';
        return errors;
      }}
      onSubmit={(values, { setSubmitting }) => {
        // 执行同步提交逻辑
        console.log('提交的数据:', values);
        
        // 标记提交状态结束，避免按钮一直处于禁用状态
        setSubmitting(false);
        
        // 调用提交成功后的函数
        afterSubmit();
      }}
    >
      {({ handleChange, handleBlur, handleSubmit, values, errors, isSubmitting }) => (
        <View style={{ padding: 20 }}>
          <TextInput
            onChangeText={handleChange('email')}
            onBlur={handleBlur('email')}
            value={values.email}
            placeholder="邮箱"
            style={{ borderBottomWidth: 1, marginBottom: 10, padding: 8 }}
          />
          {errors.email && <Text style={{ color: 'red', marginBottom: 10 }}>{errors.email}</Text>}
          
          <TextInput
            onChangeText={handleChange('password')}
            onBlur={handleBlur('password')}
            value={values.password}
            placeholder="密码"
            secureTextEntry
            style={{ borderBottomWidth: 1, marginBottom: 20, padding: 8 }}
          />
          {errors.password && <Text style={{ color: 'red', marginBottom: 20 }}>{errors.password}</Text>}
          
          <Button
            onPress={handleSubmit}
            title="提交"
            disabled={isSubmitting}
          />
        </View>
      )}
    </Formik>
  );
};

export default MyForm;

2. 异步提交场景（如API请求） #

如果提交逻辑是异步的（比如调用后端API），需要等待异步操作完成后再调用函数，确保只有提交成功时才触发：

// 仅修改onSubmit部分，其余代码同上面示例
onSubmit={(values, { setSubmitting, resetForm }) => {
  // 模拟API请求
  fetch('https://your-api-endpoint.com/submit-form', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(values),
  })
  .then(res => res.json())
  .then(responseData => {
    console.log('API返回结果:', responseData);
    // 提交成功后调用目标函数
    afterSubmit();
    // 可选：重置表单
    resetForm();
  })
  .catch(err => {
    console.error('提交失败:', err);
    // 这里可以添加错误处理逻辑，比如显示错误提示
  })
  .finally(() => {
    // 无论成功失败，都要结束提交状态
    setSubmitting(false);
  });
}}

关键注意点 #

• 必须调用setSubmitting(false)：这会结束Formik的提交状态，让按钮恢复可点击，避免用户重复提交。
• 表单验证通过才会触发onSubmit：Formik会先执行validate逻辑，只有验证无错误时才会进入提交回调，所以无需额外判断验证状态。
• 按需使用resetForm：如果需要在提交成功后清空表单，可以调用Formik提供的resetForm方法。

内容的提问来源于stack exchange，提问作者Ahmed salem