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

【问题标题】：How can I access formik helpers insider formik wrapper component to set field value of a particular field如何访问 formik helpers Insider formik wrapper 组件来设置特定字段的字段值
【发布时间】：2022-08-06 05:44:51
【问题描述】：

我正在按照教程通过创建 formik 包装组件来使用 formik 创建多步表单。到目前为止，它适用于普通字段元素。但是在某些情况下，我希望使用 setFieldValue 设置自定义组件的某些值，formik 帮助器无法访问包装器的子元素。有人可以帮助我如何使用 formik 助手来设置包装器的子元素的值。

这是我正在关注的示例link。

这就是我想要实现的 -

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

我怎样才能访问它来设置孩子的价值。我尝试创建一个上下文，但我对在哪里初始化上下文感到困惑。即我应该在哪里以及如何为这个特定场景初始化上下文。

标签： javascript reactjs forms next.js formik

【解决方案1】：

更好的方法是将input 提取到单独的组件中，然后您可以在该组件中使用setFieldValue：

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

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

【讨论】：