Как я могу поставить onSubmit Formik на другой компонент? - PullRequest
Новая
       7

Как я могу поставить onSubmit Formik на другой компонент?

0 голосов
/ 07 апреля 2020

У меня есть компонент с именем WorkingHours, который отображает многие компоненты WeekDay 

const WorkingHours = () => {
  return (
    <div>
      <WeekDay day={'Monday'} />
      <WeekDay day={'Tuesday'} />
      <WeekDay day={'Wednesday'} />
      <WeekDay day={'Thursday'} />
      <WeekDay day={'Friday'} />
      <WeekDay day={'Saturday'} />
      <WeekDay day={'Sunday'} />
                        //how to add button for Formik's onSubmit here
    </div>
  )
}

Это мой компонент WeekDay, имеющий форму Formik. Я не хочу, чтобы в каждый будний день была кнопка «Отправить». Скорее, я хотел бы иметь одну кнопку в компоненте WorkingHours, чтобы сохранить данные каждого WeekDay 

const WeekDay = ({ day }) => {
    return (
    <div>
        <Formik
           initialValues={{ begin: '', end: '' }}

    //how to transfer this button to the WorkingHours component?
    //I don't want each day to have a button to save the values
           onSubmit={(values, { setSubmitting }) => {
        }}>
          <Form>
            <Field name={} />
          </Form>  
        </Formik>
            {day}
        </div>
    )
}

1 Ответ

0 голосов
/ 07 апреля 2020

То, что вы спрашиваете, противоречит однонаправленной модели потока данных React. Типичный способ сделать это в React - поднять состояние до уровня и получить состояние в компоненте WorkingHours.

Что касается formik, похоже, что есть компонент массива полей: https://jaredpalmer.com/formik/docs/api/fieldarray это похоже на то, что вы ищете, чтобы поднять состояние до уровня и позволить вам отправлять данные в компоненте WorkingHours.

...