使用 withFormik 的动态 Formik 表单

Question

我正在尝试创建一个 React 组件，它将 return 一个使用 withFormik 的 Formik 表单。该组件将作为道具传递给另一个组件，该道具 return 是表单的内容。这可能吗？我无法确定如何将自定义道具传递给 mapPropsToValues（基本上是如何将自定义道具放在 :

的位置

   one:'',
   two:'',
   three:''

在下面的代码中：

const DynamicCustomForm = ({FormType, formName, formFields,  ...props}) => {

    console.log(props);

        const {
            values,
            touched,
            errors,
            status,
            handleChange,
            handleBlur,
            setFieldValue,
            setFieldTouched,
            validateField,
            validateForm,
            handleSubmit,
            isSubmitting,
        } = props;
        return (
            <form onSubmit={handleSubmit}>
                <Field name={formName} >
                    {({
                        field,
                        form,
                        meta,
                    }) => (
                        <FormType />
                    )}
                </Field>

                <Button type="submit" className="button" disabled={isSubmitting}>
                    Submit
                </Button>

            </form>

        );
    };


    const FormikEnhancedDynamicCustomForm = withFormik({
        mapPropsToValues: () => ({
            one:'',
            two:'',
            three:''
        }),
        validateOnMount: false,
        validateOnBlur: false,
        //validate: validate,
        handleSubmit: (values, { setSubmitting }) => {
            handleSubmit(values);
            setTimeout(() => {
                alert(JSON.stringify(values, null, 2));
                setSubmitting(false);
            }, 1000);
        },

        displayName: 'DynamicCustomForm',
    })(DynamicCustomForm);

    export default FormikEnhancedDynamicCustomForm;

Answer 1

这个 post https://github.com/jaredpalmer/formik/issues/752 帮助我确定如果我删除 mapPropsToValues 那么我作为道具传递给具有 Formik 表单的组件的任何东西都将作为 Formik 值添加。如果有其他方法可以做到这一点，我仍然会感兴趣。

使用 withFormik 的动态 Formik 表单

Dynamic Formik Form Using withFormik

forms

reactjs

formik