理解 Formik 和 React

Question

这可能不是 post 这个问题的最佳位置，但是在哪里呢？

下面的代码取自 Formik's overview page，我对 onSubmit 处理程序非常困惑：

表单元素有一个 onSubmit 属性引用 handleSubmit ，它在匿名函数上传递：<form onSubmit={handleSubmit}>。那是从哪里来的？

Formik 组件还有一个 onSubmit 属性：

onSubmit={(values, { setSubmitting }) => { ... }

它们之间有什么关系？怎么回事？

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

const Basic = () => (
  <div>
    <h1>Anywhere in your app!</h1>
    <Formik
      initialValues={{ email: '', password: '' }}
      validate={values => {
        let errors = {};
        if (!values.email) {
          errors.email = 'Required';
        } else if (
          !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
        ) {
          errors.email = 'Invalid email address';
        }
        return errors;
      }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({
        values,
        errors,
        touched,
        handleChange,
        handleBlur,
        handleSubmit,
        isSubmitting,
        /* and other goodies */
      }) => (
        <form onSubmit={handleSubmit}>
          <input
            type="email"
            name="email"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values.email}
          />
          {errors.email && touched.email && errors.email}
          <input
            type="password"
            name="password"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values.password}
          />
          {errors.password && touched.password && errors.password}
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </form>
      )}
    </Formik>
  </div>
);

export default Basic;

Answer 1

该组件将 onSubmit 作为一个 prop，您可以在提交表单时执行要执行的代码。该道具还提供了一些 arguments 例如值（表单的值）供您在 onSubmit 函数中使用。

handleSubmit 表单是从 Formik 库自动生成的，该库自动执行解释的一些常见表单逻辑 here。 handleSubmit 将自动执行上面提到的 onSubmit 函数作为其阶段的一部分（预提交、验证、提交）。希望这能回答您的问题！

理解 Formik 和 React

understanding Formik and React

reactjs

formik