我正在使用 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()
吗?