如何访问 formik helpers Insider formik wrapper 组件来设置特定字段的字段值

Question

I am following a tutorial to create a multistep form with formik by creating a formik wrapper component. So far it works for normal field elements. But I have certain scenarios where I wish to use setFieldValue to set some values of custom component, the formik helpers are inaccessible to the child elements of the wrapper. Can someone help me on how can I use formik helpers to set values of a child element of a wrapper.

Here is the example link which I am following.

This is what I am trying to achieve -

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

How can I be able to access it for setting the value of a child. I tried creating a context but I am confused on where to initialize the context.ie As to where and how should I initialize the context for this particular scenario.

Answer 1

Better way is to extract input into separate component and then you can use setFieldValue inside that component:

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

The reason why it works is that all your components wrapper by formik Form .