React+Formik表单onSubmit函数失效问题排查求助

Let's break down the possible issues preventing your Formik onSubmit function from running, and fix them one by one:

1. Check Your CustomInput Component Implementation #

The most common culprit here is that your CustomInput component isn't properly forwarding the necessary props to the underlying input element. When using Formik's Field with a custom component, Formik passes critical props like onChange, onBlur, and value to your component—if these aren't attached to the actual <input> inside CustomInput, Formik won't track the input's state correctly, and form submission might be blocked entirely (or values won't update, leading to silent validation failures).

Make sure your CustomInput looks something like this:

// Using Formik's field prop pattern (recommended)
const CustomInput = ({ field, form, ...props }) => {
  return <input {...field} {...props} />;
};

// Or if you prefer explicit prop handling:
const CustomInput = ({ onChange, onBlur, value, ...props }) => {
  return <input onChange={onChange} onBlur={onBlur} value={value} {...props} />;
};

If your CustomInput ignores these event handlers, Formik can't detect input changes, and validation/submission logic won't trigger as expected.

2. Validate Your validationSchemaGlobal #

If your validation schema is invalid (e.g., missing imports, incorrect rules, or typos), Formik might silently fail validation, blocking the onSubmit function from running.

• First, confirm you've imported Yup (assuming you're using Yup for validation) and that validationSchemaGlobal is correctly defined. A valid email schema should look like this:

import * as Yup from 'yup';

const validationSchemaGlobal = Yup.object({
  email: Yup.string().email('Invalid email address').required('Email is required'),
});

• Test temporarily removing the validationSchema={validationSchemaGlobal} prop from Formik. If onSubmit starts working, the issue is definitely with your validation schema.

3. Verify Form Structure and Event Propagation #

Double-check that no parent elements (like your Cards, CardBody, or CardFooter components) are calling event.preventDefault() or stopping event propagation—this would block the form's submit event from reaching Formik's handler.

You’ve already correctly nested the submit button inside the <form> element and passed handleSubmit to the form's onSubmit prop, which is good, but a tiny typo here (like handlesubmit instead of handleSubmit) would break submission entirely.

4. Check for Console Errors #

Open your browser's developer tools (F12) and check the Console tab for any JavaScript errors. Even a small issue—like an undefined FState type, missing imports for your Cards/CardBody/CardFooter components, or a typo in a prop name—could halt execution before the onSubmit function runs.

For example, you’re using values: FState in your onSubmit callback—make sure FState is a properly defined TypeScript interface that includes the email field.

Start with checking the CustomInput component first, as that's the most likely cause of your issue. Once you fix these potential problems, your onSubmit function should fire as expected.

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