【问题标题】:Formik form won't clear outFormik 表格不会清除
【发布时间】:2021-10-30 03:13:17
【问题描述】:

我试图用其 onClick 的 hoc 数据填充我的 formik 表单的 initialValue。 使用 reForm() 时将表单清除回其第一个初始值 (initValues) 不起作用,并且它总是返回到 prop 中的值。

父母:

const [contactData, setContactData] = useState();
.
..
....

<First userData={contactData}/>
<Second userData={setContactData}/>

孩子:

function FirstComponent({userData}) {
    const [isUpdate, setUpdate] = useState(false);
    const initValues = {
        id:'',
        email: '',
        name: '',
        contact: ''
    };
    useEffect(() => {
        // setContactData(userData)
        userData!==undefined ? setUpdate(true) : setUpdate(false);
        console.log("from form: ", userData)
    }, [userData]);
    
    const formik = useFormik({
        enableReinitialize: true,
        validationSchema: FormSchema,
        initialValues: userData || initValues,
        onSubmit: (values) => {
            // same shape as initial values
            console.log("the Data ", userData)
            console.log("onsubmit ", values);
        }
    })

    const resForm = () => {
        formik.initialValues = {initValues};
        console.log("prop ", userData)

        console.log("formik values ",formik.initialValues)
        formik.resetForm();
    }

在 formik.resetForm() 中用 initValues 替换 initialValues 似乎可行,但它会使用 userData 属性重新初始化表单 - function FormComponent({userData})

【问题讨论】:

    标签: reactjs react-hooks react-props formik


    【解决方案1】:

    部分修复.. 刚刚将 resForm() 中的formik.resetForm() 修改为

    formik.resetForm({
      values:initValues
    });
    

    但是当控制台登录 resForm() 时,来自父级的 prop (userData) 仍然存在

    【讨论】:

    • 在您的代码中,您刚刚提到重置表单值,而不是来自父组件的 userData。如果您还需要更改 userData ,则需要将回调函数从父级传递给您的 FirstComponent
    • 我没想到!谢谢它的工作:)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-04-29
    • 1970-01-01
    • 2022-10-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-12-03
    相关资源
    最近更新 更多