当存在自定义组件时，Formik resetForm()不会重置整个表单
当存在自定义组件时，Formik resetForm()不会重置整个表单
提问于 2020-06-08 01:45:24
我使用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函数访问它，但在调用函数resetForm时，由我的CustomFileUpload组件字段处理的字段是唯一没有被重置的字段
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()重置吗
回答 2
Stack Overflow用户
发布于 2020-08-05 14:25:35
我已经面对过这个问题了。你有没有尝试传递这些值来精确输入。
{({ submitForm, isSubmitting, values }) => (
<div className="flex">
<Form>
<Field
component={CustomFileUpload}
label="Cover image"
name="cover"
value = { values.cover || "" } <-- insert this
/>Stack Overflow用户
发布于 2021-11-25 23:11:22
你需要给你的字段一个value属性...尝尝这个
<Field
component={CustomFileUpload}
label="Cover image"
name="cover"
value={values.cover}
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62249328
复制相关文章
相似问题
腾讯云开发者
