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);

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

Answer 1

您可以按照您在问题底部暗示的方式通过 props 传递函数。然后你可以将 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/>
}

Answer 2

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

withFormik，将函数作为道具传递

withFormik, pass function as props

forms

reactjs

formik