reactjs - 使用 withFormik 的动态 Formik 表单

Question

我正在尝试创建一个 React 组件，它将返回一个使用 withFormik 的 Formik 表单。该组件将通过另一个组件作为返回表单内容的道具。这可能吗？我无法确定如何将自定义道具传递给 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;

标签： reactjsformsformik

Answer 1

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