如何在Formik包装器组件内访问Formik助手以设置字段值

我跟着教程用Formik包装器组件实现多步骤表单，普通字段能正常工作，但在部分场景下需要用setFieldValue给自定义组件设值，却没法让包装器的子元素访问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>

请问如何让子元素访问Formik助手来设置值？我试过创建Context，但不清楚在此场景下该在哪里以及如何初始化它。

解决方案 #

方法1：直接使用Formik自带的useFormikContext钩子 #

Formik内置了上下文钩子，无需自行创建Context就能获取setFieldValue等助手：

• 首先在组件中导入钩子：

  import { useFormikContext } from 'formik';
  

• 在组件内部调用钩子提取需要的方法：

  const { setFieldValue } = useFormikContext();
  

• 之后就能在onChange事件中直接使用：

  <input
    name='image'
    type='file'
    className=''
    onChange={(e) => {setFieldValue("image", e.target.files[0]);}}
  />
  

方法2：让自定义FormikStep组件传递Formik上下文 #

如果你的FormikStep是自定义包装组件，需要把Formik上下文传递给子元素：

• 修改FormikStep组件，通过useFormikContext获取上下文，再克隆子元素并注入上下文：

  import { useFormikContext } from 'formik';
  import React from 'react';
  
  const FormikStep = ({ children, label, validationSchema }) => {
    const formik = useFormikContext();
    
    const enhancedChildren = React.Children.map(children, child => {
      if (React.isValidElement(child)) {
        return React.cloneElement(child, { formik });
      }
      return child;
    });
    
    // 保留原有步骤渲染逻辑
    return (
      <div className="form-step">
        {enhancedChildren}
      </div>
    );
  };
  

• 在子元素中通过props获取上下文并使用：

  <input
    name='image'
    type='file'
    className=''
    onChange={(e) => {props.formik.setFieldValue("image", e.target.files[0]);}}
  />
  

方法3：用Formik的Field组件包装自定义输入 #

对于文件上传这类特殊输入，用Field组件包装可以自动关联Formik上下文：

import { Field } from 'formik';

<Field name="image">
  {({ field, form }) => (
    <input
      {...field}
      type='file'
      className=''
      onChange={(e) => {form.setFieldValue("image", e.target.files[0]);}}
    />
  )}
</Field>

内容的提问来源于stack exchange，提问作者Harshad Naik