понимание Formik и React - PullRequest
Новая
       2

понимание Formik и React

0 голосов
/ 08 апреля 2019

Возможно, это не лучшее место для размещения этого вопроса, но где же тогда?

Код ниже взят из страницы обзора Formik , и я очень запутался в обработчиках 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;

1 Ответ

0 голосов
/ 08 апреля 2019

Компонент принимает onSubmit в качестве опоры, где вы можете выполнить код, который вы хотите выполнить при отправке формы.Этой подпорке также даются некоторые аргументы , такие как значения (значения формы), которые вы можете использовать в функции onSubmit.

Форма handleSubmit автоматически генерируется из библиотеки Formik, которая автоматизирует некоторыеобъясненная логика общей формы здесь .HandleSubmit автоматически выполнит функцию onSubmit, упомянутую выше, как часть своих фаз (предварительная отправка, проверка, отправка ).Надеюсь, что ответ на ваш вопрос!

...