最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Formik resetForm() does not reset the entire form when there is a custom component - Stack Overflow

programmeradmin1浏览0评论

I'm using Formik - and formik-material-ui - to handle my forms. In one of these forms, I include a CustomFileUpload ponent:

import React from "react";

import {
    Input,
    FormControl,
} from "@material-ui/core";

const CustomFileUpload = (props) => (
    <FormControl>
        <Input
            inputProps={{
                type: "file",
                disabled: props.disabled || props.form.isSubmitting,
                name: props.field.name,
                onChange: (event) => {
                    const file = event.currentTarget.files[0];
                    props.form.setFieldValue(props.field.name, file);
                },
            }}
        />
    </FormControl>
);

export default CustomFileUpload;

Despite its value being read by my form, and reachable through the following testSubmit function, the field handled by my CustomFileUpload ponent field is the only one not being reset when calling the function resetForm:

const testSubmit = (values, { resetForm }) => {
    console.log(values);
    resetForm();
};

In case it might be useful, when removing all the "working fields", this is what my Formik ponent looks like:

<Formik
    initialValues={{
        cover: cover
    }}
    onSubmit={(values, { setSubmitting, resetForm }) => {
        testSubmit(values, { resetForm });
    }}
>
    {({ submitForm, isSubmitting }) => (
        <div className="flex">
            <Form>
                <Field
                    ponent={CustomFileUpload}
                    label="Cover image"
                    name="cover"
                />

                <Button
                    onClick={submitForm}
                >
                    Submit
                </Button>
            </Form>
        </div>
    )}
</Formik>

Does someone know why the cover value is reachable through console.log(values) but not being reset by resetForm()?

I'm using Formik - and formik-material-ui - to handle my forms. In one of these forms, I include a CustomFileUpload ponent:

import React from "react";

import {
    Input,
    FormControl,
} from "@material-ui/core";

const CustomFileUpload = (props) => (
    <FormControl>
        <Input
            inputProps={{
                type: "file",
                disabled: props.disabled || props.form.isSubmitting,
                name: props.field.name,
                onChange: (event) => {
                    const file = event.currentTarget.files[0];
                    props.form.setFieldValue(props.field.name, file);
                },
            }}
        />
    </FormControl>
);

export default CustomFileUpload;

Despite its value being read by my form, and reachable through the following testSubmit function, the field handled by my CustomFileUpload ponent field is the only one not being reset when calling the function resetForm:

const testSubmit = (values, { resetForm }) => {
    console.log(values);
    resetForm();
};

In case it might be useful, when removing all the "working fields", this is what my Formik ponent looks like:

<Formik
    initialValues={{
        cover: cover
    }}
    onSubmit={(values, { setSubmitting, resetForm }) => {
        testSubmit(values, { resetForm });
    }}
>
    {({ submitForm, isSubmitting }) => (
        <div className="flex">
            <Form>
                <Field
                    ponent={CustomFileUpload}
                    label="Cover image"
                    name="cover"
                />

                <Button
                    onClick={submitForm}
                >
                    Submit
                </Button>
            </Form>
        </div>
    )}
</Formik>

Does someone know why the cover value is reachable through console.log(values) but not being reset by resetForm()?

Share Improve this question asked Jun 7, 2020 at 17:45 Thanh-Quy NguyenThanh-Quy Nguyen 3,2859 gold badges34 silver badges49 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

I had already faced this issue. Have you try to pass the values to exact the input.

{({ submitForm, isSubmitting, values }) => (
    <div className="flex">
        <Form>
            <Field
                ponent={CustomFileUpload}
                label="Cover image"
                name="cover"
                value = { values.cover || "" } <-- insert this
            />

You need to give your Field a value property... try this

<Field
  ponent={CustomFileUpload}
  label="Cover image"
  name="cover"
  value={values.cover}
/>
发布评论

评论列表(0)

  1. 暂无评论