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组件的函数主体中，以便可以将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/>
}

Answer 2

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

withFormik，传递函数作为道具

2 个答案: