只是为了任何想知道通过 React hooks 解决什么问题的人：

Formik 2.x，如本答案所述

// import this in the related component
import { useFormikContext } from 'formik';

// Then inside the component body
const { submitForm } = useFormikContext();

const handleSubmit = () => {
  submitForm();
}

请记住，该解决方案仅适用于Formik 组件内的组件，因为它使用上下文 API。如果由于某种原因您想从外部组件手动提交，或者从实际使用 Formik 的组件手动提交，您实际上仍然可以使用innerRefprop。

TLDR ; 如果您提交的组件是 a<Formik>或withFormik()组件的子组件，则此上下文答案就像一个魅力，否则，请使用innerRef下面的答案。

Formik 1.5.x+

// Attach this to your <Formik>
const formRef = useRef()

const handleSubmit = () => {
  if (formRef.current) {
    formRef.current.handleSubmit()
  }
}

// Render
<Formik innerRef={formRef} />

您可以将formikProps.submitForm（Formik 的程序化提交）绑定到父组件，然后触发来自父组件的提交：

import React from 'react';
import { Formik } from 'formik';

class MyForm extends React.Component {
    render() {
        const { bindSubmitForm } = this.props;
        return (
            <Formik
                initialValues={{ a: '' }}
                onSubmit={(values, { setSubmitting }) => {
                    console.log({ values });
                    setSubmitting(false);
                }}
            >
                {(formikProps) => {
                    const { values, handleChange, handleBlur, handleSubmit } = formikProps;

                    // bind the submission handler remotely
                    bindSubmitForm(formikProps.submitForm);

                    return (
                        <form noValidate onSubmit={handleSubmit}>
                            <input type="text" name="a" value={values.a} onChange={handleChange} onBlur={handleBlur} />
                        </form>
                    )
                }}
            </Formik>
        )
    }
}

class MyApp extends React.Component {

    // will hold access to formikProps.submitForm, to trigger form submission outside of the form
    submitMyForm = null;

    handleSubmitMyForm = (e) => {
        if (this.submitMyForm) {
            this.submitMyForm(e);
        }
    };
    bindSubmitForm = (submitForm) => {
        this.submitMyForm = submitForm;
    };
    render() {
        return (
            <div>
                <button onClick={this.handleSubmitMyForm}>Submit from outside</button>
                <MyForm bindSubmitForm={this.bindSubmitForm} />
            </div>
        )
    }
}

export default MyApp;

我找到的最佳解决方案在此处描述https://stackoverflow.com/a/53573760

在此处复制答案：

将“id”属性添加到您的表单中：id='my-form'

class CustomForm extends Component {
    render() {
        return (
             <form id='my-form' onSubmit={alert('Form submitted!')}>
                // Form Inputs go here    
             </form>
        );
    }
}

然后在表单外的目标按钮的“form”属性中添加相同的Id：

<button form='my-form' type="submit">Outside Button</button>

现在，“外部按钮”按钮将完全等效，就好像它在表单内部一样。

注意：IE11 不支持此功能。

我刚刚遇到了同样的问题，并找到了一个非常简单的解决方案，希望这会有所帮助：

这个问题可以用 plain 解决html。如果你id在你的标签上放了一个标签，form那么你可以使用按钮的form标签用你的按钮来定位它。

例子：

      <button type="submit" form="form1">
        Save
      </button>
      <form onSubmit={handleSubmit} id="form1">
           ....
      </form>

您可以将表单和按钮放在任何地方，甚至可以分开。

然后，此按钮将触发表单提交功能，formik 将捕获像往常一样继续该过程。（只要在呈现按钮时将表单呈现在屏幕上，那么无论表单和按钮位于何处，这都将起作用）

如果您将类组件转换为功能组件，则自定义钩子useFormikContext提供了一种在树的任何位置使用 submit 的方法：

   const { values, submitForm } = useFormikContext();

PS：这仅适用于那些不需要在Formik组件外调用 submit 的人，因此您可以将Formik组件放在组件树中的更高级别，而不是使用 ref ，并使用自定义钩子useFormikContext，但如果真的需要从外部提交，Formik您必须使用useRef .

<Formik innerRef={formikRef} />

https://formik.org/docs/api/useFormikContext