React Formik在<Formik />外部使用submitForm_在formik组件外部处理formik窗体_使用React & Formik，我如何从<Form>组件外部触发Formik onSubmit？ - 腾讯云开发者社区

React Formik在<Formik />外部使用submitForm

基础概念

React Formik 是一个用于简化 React 表单处理的库。它结合了 React 的组件化思想和 Formik 的表单管理能力，使得表单处理更加简洁和高效。<Formik /> 是 Formik 提供的一个高阶组件（HOC），用于包裹表单组件，提供表单状态管理和提交功能。

类型

高阶组件（HOC）：<Formik /> 是一个高阶组件，用于包裹表单组件。
钩子函数：Formik 还提供了钩子函数（如 useFormik），可以在函数组件中使用。

应用场景

复杂表单：适用于需要复杂状态管理和验证的表单。
快速开发：可以快速搭建和开发表单，减少样板代码。

问题：在 `<Formik />` 外部使用 `submitForm`

原因

submitForm 是 Formik 提供的一个方法，用于手动提交表单。通常情况下，submitForm 是通过 <Formik /> 包裹的组件内部调用的。如果在 <Formik /> 外部调用 submitForm，可能会遇到以下问题：

未正确绑定：submitForm 方法未正确绑定到 Formik 实例。
上下文问题：在 React 函数组件中，可能会遇到上下文（context）问题，导致无法访问 Formik 实例。

解决方法

使用 useFormik 钩子：在函数组件中使用 useFormik 钩子来获取 Formik 实例和相关方法。

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

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      name: '',
      email: '',
    },
    onSubmit: values => {
      console.log(values);
    },
  });

  const handleSubmit = () => {
    formik.handleSubmit();
  };

  return (
    <div>
      <form onSubmit={formik.handleSubmit}>
        <input
          type="text"
          name="name"
          onChange={formik.handleChange}
          value={formik.values.name}
        />
        <input
          type="email"
          name="email"
          onChange={formik.handleChange}
          value={formik.values.email}
        />
        <button type="submit">Submit</button>
      </form>
      <button onClick={handleSubmit}>Submit from outside</button>
    </div>
  );
};

export default MyForm;

传递 Formik 实例：通过 props 将 Formik 实例传递到外部组件。

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

const MyForm = () => {
  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      onSubmit={values => {
        console.log(values);
      }}
    >
      {({ handleSubmit }) => (
        <div>
          <form onSubmit={handleSubmit}>
            <input
              type="text"
              name="name"
              onChange={event => {
                // handle change
              }}
              value=""
            />
            <input
              type="email"
              name="email"
              onChange={event => {
                // handle change
              }}
              value=""
            />
            <button type="submit">Submit</button>
          </form>
          <ExternalButton onSubmit={handleSubmit} />
        </div>
      )}
    </Formik>
  );
};

const ExternalButton = ({ onSubmit }) => {
  return <button onClick={onSubmit}>Submit from outside</button>;
};

export default MyForm;