Formik Синтаксис JavaScript - PullRequest
Новая
       14

Formik Синтаксис JavaScript

0 голосов
/ 15 декабря 2018

Мне сложно понять, какие синтаксисы обычно использовались при работе с Formik.Я думаю, что многие люди имеют такие проблемы, когда начинают реагировать и формировать.Пожалуйста, посмотрите на этот код: 

export default Formik({
  mapPropsToValues: (props) => ({ 
    email: props.user.email,
    username: props.user.username,
    imaginaryThingId: props.user.imaginaryThingId,
  }),

  validationSchema: Yup.object().shape({
    email: Yup.string().email('Invalid email address').required('Email is required!'),
    username: Yup.string().required('This man needs a username'),
  }),

  handleSubmit: (values, { setSubmitting }) => {
    setTimeout(() => {
      // submit them do the server. do whatever you like!
      alert(JSON.stringify(values, null, 2));
      setSubmitting(false);
    }, 1000);
  },
})(UserForm);

Вопрос № 1: Что делает export default Formik({})?это определение функции?

Вопрос № 2: validationSchema: Yup.object() Что это?использование двоеточий вне определения объекта!?

Вопрос № 3: Какая часть кода выполняется первым?

1 Ответ

0 голосов
/ 16 декабря 2018

Я предлагаю вам сначала немного ознакомиться с JavaScript, поскольку эти вопросы не относятся к React или Fromik.По сути, withFormik(options) возвращает функцию, которая принимает компонент React в качестве входных данных и возвращает расширенный компонент, который внутренне управляет состоянием формы.Следующее - в основном то, что у вас есть выше, написано так, чтобы отвечать на ваши вопросы. 

const UserForm = /* base form component */
const mapPropsToValues = /* props mapper */
const validationSchema = /* validation schema */
const handleSubmit = /* submit handler */
const formikOptions = { mapPropsToValues, validationSchema, handleSubmit }
const EnhancedUserForm = withFormik(formikOptions)(UserForm)

export default EnhancedUserForm
...