withFormik，将函数作为道具传递答案

【问题标题】：withFormik, pass function as propswithFormik，将函数作为道具传递
【发布时间】：2019-11-05 17:01:00
【问题描述】：

我正在使用 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);

我不想这样做，而是想在我的 App.js（根）组件中传递类似 <CreateForm handleSubmit={handleSubmit} /> 的内容。谁能给我一个提示，请告诉我怎么做？

【问题讨论】：

标签： reactjs forms formik

【解决方案1】：

您可以按照问题底部提示的方式通过道具传递函数。然后您可以将 withFormik 调用包装在您的 CreateForm 组件的函数体中，以便您可以将道具传递给 CreateForm 组件并让 CreateForm 控制这些道具如何映射到 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/>
}

【讨论】：

那么，在我的 app.js 中，我渲染了吗？对不起，我对 withFomik() 函数很困惑
它为我呈现一个空结果``` export const CreatePDSA = ({ handleSubmit }) => { return withFormik({ mapPropsToValues: () => ({ PDSAName: '', PDSAtype: ' '，primarySkill：''，secondarySkill：''，minPrice：''，货币：''，格式：''}），validationSchema：（）=> CreatePdsaSchema，handleSubmit：handleSubmit }）（CreatePDSAForm）； }; ```
@CCL 我知道问题出在哪里。 withFormik 调用返回一个组件（不是可渲染实例），因此返回 withFormik 的输出实际上是我的错误，对此感到抱歉！你真的想返回一个包装好的withFormik 表单的实例。有关详细信息，请参阅答案的更新。
这是动态应用 HOC。使用上述内容，您将在重新安装时丢失所有表单状态（formik 字段将恢复为 initialValues）。要么重写为经典类组件并在构造函数中应用 HOC，要么在组件定义之外应用 HOC。阅读：reactjs.org/docs/…

【解决方案2】：

handleSubmit 参数集中的第二个参数是formik 包。道具被传递到formik包中。传入 formik 包的 props 可以这样访问： handleSubmit: (values, { props }) => {...your function here}

【讨论】：