如何在提交之前获取 Formik 值

在使用 Formik 管理表单时，我们经常需要在提交前获取表单的值并进行某些操作，比如发送到服务器保存数据或者进行表单校验等。那么在 Formik 中如何获取表单的值呢？下面我们来介绍几种方法。

使用 onSubmit 回调函数

Formik 提供了 onSubmit 回调函数，该函数会在表单提交时被调用。我们可以在该函数中通过 Formik 提供的方法获取表单的值。

import { Formik, Form, Field } from 'formik';

function MyForm() {
  const handleSubmit = (values, { setSubmitting }) => {
    // 在这里获取表单的值并进行操作
    console.log('Form values:', values);

    // 提交表单
    setTimeout(() => {
      // do your form submission logic here
      setSubmitting(false);
    }, 1000);
  };

  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      onSubmit={handleSubmit}
    >
      {({ isSubmitting }) => (
        <Form>
          <Field type="text" name="name" />
          <Field type="email" name="email" />
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
}

使用 Formik Context

我们可以通过 Formik Context 获取当前表单的值。Context 是 React 中用于跨组件传递数据的机制，Formik 也使用了 Context 来管理表单状态。

import React, { useContext } from 'react';
import { FormikContext } from 'formik';

function MyForm() {
  const formik = useContext(FormikContext);

  const handleSubmit = (event) => {
    event.preventDefault();

    // 在这里获取表单的值并进行操作
    console.log('Form values:', formik.values);

    formik.handleSubmit();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" {...formik.getFieldProps('name')} />
      <input type="email" name="email" {...formik.getFieldProps('email')} />
      <button type="submit">
        Submit
      </button>
    </form>
  );
}

使用 withFormik 高阶组件

我们也可以使用 withFormik 高阶组件将表单的值注入到组件的 props 中。这样我们就可以在组件的方法中通过 props 获取表单的值了。

import { withFormik, Form, Field } from 'formik';

function MyForm({ values, handleSubmit, isSubmitting }) {
  const handleCustomSubmit = (event) => {
    event.preventDefault();

    // 在这里获取表单的值并进行操作
    console.log('Form values:', values);

    handleSubmit();
  };

  return (
    <Form onSubmit={handleCustomSubmit}>
      <Field type="text" name="name" />
      <Field type="email" name="email" />
      <button type="submit" disabled={isSubmitting}>
        Submit
      </button>
    </Form>
  );
}

const EnhancedForm = withFormik({
  mapPropsToValues: () => ({ name: '', email: '' }),
  handleSubmit: (values, { setSubmitting }) => {
    // do your form submission logic here
    setTimeout(() => {
      setSubmitting(false);
    }, 1000);
  },
})(MyForm);

以上就是在 Formik 中获取表单的值的几种方法。希望这篇文章对你有所帮助！