如何將 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 組件中提交。