如何访问 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包装。