如何訪問 formik helpers Insider formik wrapper 組件來設置特定字段的字段值

Question

我正在按照教程通過創建 formik 包裝器組件來使用 formik 創建多步表單。 到目前為止，它適用於普通字段元素。 但是在某些情況下，我希望使用 setFieldValue 來設置自定義組件的某些值，formik 助手無法訪問包裝器的子元素。 有人可以幫助我如何使用 formik 助手來設置包裝器的子元素的值。

這是我正在關注的示例鏈接。

這就是我想要實現的 -

 <FormikStepper
  initialValues={{...values}}
  onSubmit={someFunction}
  onReset={() => {}}> 
<FormikStep label='Step 1' validationSchema={Step1ValidationSchema}>
<label>Some Label</label>
 <input
  name='image'
  type='file'
  className=''
  onChange={(e) => {setFieldValue("image", e.target.files[0]);}}
  />
<ErrorMessage name='image'/>
</FormikStep>

我怎樣才能訪問它來設置孩子的價值。 我嘗試創建一個上下文，但我對在哪里初始化上下文感到困惑。即我應該在哪里以及如何為這個特定場景初始化上下文。

Answer 1

更好的方法是將input提取到單獨的組件中，然后您可以在該組件中使用setFieldValue ：

const ImageInput = (props) = {
 const [setFieldValue] = useFormikContext()
 ...
}

它起作用的原因是您的所有組件都由 formik Form包裝。