如何将 Formik 的 onSubmit 放在另一个组件上？

Question

我有一个名为 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”组件上有一个按钮，以保存每个工作日的数据

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>
    )
}

Answer 1

您所要求的与 React 的单向数据流 model 背道而驰。 在 React 中执行此操作的典型方法是将 state 提升一个级别，并在 WorkingHours 组件中添加 state。

至于formik，看起来有一个字段数组组件： https://jaredpalmer.com/formik/docs/api/fieldarray看起来就像您正在寻找将 state 提升一个级别并让您拥有您在 WorkingHours 组件中提交。