如何解决React formik 部分更新初始值
在我的反应组件中,我有这两个初始值
const [initialValues,setinitialValues] = useState({
name: 'Tom',age: 85,});
我有一个文本字段来更改名称字段的值。我有一个按钮可以更改年龄字段。
如果我输入姓名为“Jerry”并按下该按钮来更新年龄,它会将年龄更新为 75 并将姓名“Jerry”再次重置为“Tom”。
在文本框中输入 Jerry 并点击按钮以查看它更改为“Tom”
我该如何解决这个问题?
任何帮助! 提前致谢! =)
解决方法
您不能将这样的表单值重置为初始值。
您需要做的是使用 Formik 表单引用中的 resetForm()
方法。
您只提供一次初始值,并在需要时重置。
我分叉了你的 codesanbox 并修改了代码。 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.x.x
ref
更改为 innerRef
:
<Formik
innerRef={(ref) => {
formikRef.current = ref;
}}
></Formik>;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。