javascript - Formik resetForm() 在有自定义组件时不会重置整个表单

Question

我正在使用 Formik - 和 formik-material-ui - 来处理我的表单。在其中一种形式中，我包含了一个 CustomFileUpload 组件：

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;

尽管我的表单读取了它的值，并且可以通过以下 testSubmit 函数访问，但我的 CustomFileUpload 组件字段处理的字段是唯一在调用该函数时没有被重置的字段resetForm：

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

如果它可能有用，当删除所有“工作字段”时，这就是我的 Formik 组件的样子：

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

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

有人知道为什么cover值可以通过console.log(values)但不能被重置resetForm()吗？

标签： javascriptformikformik-material-ui

Answer 1

我已经面临这个问题。您是否尝试传递值以精确输入。

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