withFormik，将函数作为道具传递

Question

我正在使用 Formik 构建用户输入表单。我正在使用 withFormik 来处理我的表单。我目前正在我的组件中传递我的 handleSubmit ，如下所示：

export const CreateForm = withFormik({
  mapPropsToValues: () => ({
    primarySkill: "12"
  }),
  validationSchema: () => FormSchema,

  handleSubmit: (values, { setSubmitting }) => {
    setTimeout(() => {
      alert(JSON.stringify(values, null, 2)); // For testing
      setSubmitting(false);
    }, 1000);
  }
})(MyForm);

而不是这样做，我想<CreateForm handleSubmit={handleSubmit} />在我的 App.js（根）组件中传递这样的东西。任何人都可以给我一个提示如何做到这一点，好吗？

Answer 1

您可以按照问题底部提示的方式通过 props 传递函数。然后，您可以将withFormik调用包装在组件的函数体内，CreateForm以便您可以将 props 传递给CreateForm组件并CreateForm控制这些 props 如何映射到 Formik 组件。

例如：

const MyComponent = props => {
    function handleSubmit(values, { setSubmitting }) {
        // handle
    }

    return (
        <CreateForm handleSubmit={ handleSubmit }/>
    )
}

const CreateForm = props => {
    const { handleSubmit } = props;

    const MyFormWithFormik = withFormik({
        // ...,
        handleSubmit: handleSubmit,
    })(MyForm);

    return <MyFormWithFormik/>
}