Formik表单模块化时如何将resetForm属性传递给子组件

你不需要额外封装自定义传参逻辑，Formik本身提供了两种原生方案，适配不同的拆分习惯，和你之前处理validate属性的传参逻辑完全兼容：

• 方案1：函数组件直接用useFormikContext钩子获取（最推荐，不用层层传prop）
  所有嵌套在<Formik>标签内部的函数子组件，都可以直接引入Formik内置的钩子，直接解构出resetForm以及其他你需要的内置属性/方法，不需要修改父组件的现有代码：

  // 拆出来的任意子组件文件内
  import { useFormikContext } from 'formik'
  import { useDispatch } from 'react-redux'
  import { postCreate } from '@/store/actions' // 你自己的提交action
  
  const CustomSubmitArea = () => {
    const dispatch = useDispatch()
    // 直接从Formik上下文拿需要的属性，和onSubmit回调里拿到的完全一致
    const { values, resetForm } = useFormikContext()
  
    const handleCustomSubmit = () => {
      dispatch(postCreate(values))
      resetForm() // 直接调用即可，和父组件onSubmit里的调用效果完全一样
    }
  
    return (
      <div className="form-btn-group">
        <button type="button" onClick={resetForm}>重置表单</button>
        <button type="submit" onClick={handleCustomSubmit}>提交</button>
      </div>
    )
  }
  
  export default CustomSubmitArea
  

• 方案2：用Formik自带的render props模式显式传参（适配类组件、需要统一管控传参的场景）
  把<Formik>的子元素写成函数形式，形参会返回完整的Formik实例属性，你可以直接把resetForm作为普通prop传给任意拆分出去的子组件，和你之前传递校验逻辑的写法逻辑完全一致：

  <Formik
    initialValues={formInitialValues}
    validate={values => formValidators(values)}
    onSubmit={(values, { resetForm }) => {
      dispatch(postCreate(values))
      resetForm()
    }}
  >
    {/* 形参formikProps包含所有Formik内置属性：resetForm、values、errors、handleSubmit等 */}
    {(formikProps) => {
      const { handleSubmit, resetForm } = formikProps
      return (
        <form onSubmit={handleSubmit}>
          {/* 其他拆分的表单项组件 */}
          <BasicInfoSection />
          <DetailInfoSection />
          {/* 显式把resetForm传给需要的子组件 */}
          <FormActionBar resetForm={resetForm} />
        </form>
      )
    }}
  </Formik>
  

注意：不要自己在组件外部单独定义重置方法硬传入，直接用Formik上下文提供的resetForm即可，自动同步你配置的initialValues，不会出现重置值不对、表单状态未更新的问题。如果是类组件没法用hooks，除了render props传参，也可以用withFormik高阶组件包裹子组件拿到实例属性。

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