【发布时间】: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