![](/img/trans.png)
[英]How do you update Formik initial values with the react context api values after an AJAX request?
[英]React formik partialy update initial values
在我的反应组件中,我有这两个初始值
const [initialValues, setInitialValues] = useState({
name: 'Tom',
age: 85,
});
我有一个文本字段来更改名称字段的值。 我有一个按钮来更改年龄字段。
如果我输入名称为“杰瑞”并按下该按钮更新年龄它将更新年龄为 75 岁并将名称“杰瑞”再次重置为“汤姆”。
在文本框中输入 Jerry 并点击按钮,看到它变为“Tom”
我该如何解决?
任何帮助! 提前致谢! =)
您不能将这样的表单值重置为初始值。
您需要做的是使用 Formik 表单参考中的方法resetForm()
。
您只提供一次初始值,并在需要时重置。
我分叉了你的代码框并修改了代码。 https://codesandbox.io/s/formik-re-render-initialvalues-forked-i84sy
以下是与您需要执行的操作相关的部分代码
import React, { useState, useRef } from "react";
...
const Page = () => {
const formikRef = useRef();
const setValues = () => {
console.log("hh");
setInitialValues({ ...initialValues, age: 75 });
formikRef.current.resetForm();
};
...
return (
<div>
<button onClick={setValues}>API Call</button>
<Formik
ref={(ref) => {
formikRef.current = ref;
}}
initialValues={initialValues}
onSubmit={submit}
validationSchema={validationSchema}
enableReinitialize
>
...
</Formik>
</div>
);
};
编辑我又添加了一个包含修改初始值的部分。 首先,您需要设置initialValues
而不是formikRef.current.resetForm()
。
笔记
如果将 Formik 升级到2.xx
,则ref
将更改为innerRef
:
<Formik
innerRef={(ref) => {
formikRef.current = ref;
}}
></Formik>;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.