类组件无法使用useFormikContext时如何提交外部Formik表单？

以下是三种可直接落地的实现方式：

方案1：通过ref绑定Formik实例直接调用提交方法 #

该方案适配按钮完全处于Formik组件外部、且两者同属一个父类组件的场景，实现成本最低：

• 在父类组件中初始化ref挂载Formik实例：

class YourParentComponent extends React.Component {
  // 初始化formik ref
  formikRef = React.createRef();

  // 外部按钮的点击事件
  handleOuterBtnClick = () => {
    // 调用Formik内置提交方法，会自动走校验、触发onSubmit回调
    this.formikRef.current?.submitForm();
  }

  render() {
    return (
      <>
        {/* 外部提交按钮 */}
        <Button title="提交" onPress={this.handleOuterBtnClick} />
        {/* 绑定ref到Formik组件 */}
        <Formik
          ref={this.formikRef}
          initialValues={{ username: '', password: '' }}
          onSubmit={(values) => {
            // 你的提交逻辑
          }}
        >
          {/* 表单内容 */}
        </Formik>
      </>
    )
  }
}

方案2：状态提升统一管理提交逻辑 #

如果你的表单逻辑分层较多，可将提交逻辑和表单状态抽到公共父组件管理：

• 在父类组件的state中存储表单初始值、定义提交逻辑
• 将提交逻辑同时传给Formik组件的onSubmit属性、以及外部按钮的点击事件
• 通过Formik的handleChange回调实时同步表单值到父组件state，外部按钮触发提交时直接取父组件存储的当前表单值即可

方案3：自定义HOC注入Formik上下文 #

如果提交按钮处于Formik组件内部、但按钮本身是类组件无法使用useFormikContext，可通过高阶组件桥接hooks能力：

• 封装高阶组件将Formik上下文作为prop注入类组件：

import { useFormikContext } from 'formik';

const withFormikContext = (ClassComponent) => {
  return (props) => {
    const formikInstance = useFormikContext();
    return <ClassComponent {...props} formik={formikInstance} />
  }
}

• 用上述HOC包裹你的类组件按钮，之后即可在类组件内部通过this.props.formik.submitForm()触发提交

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