从表单外的异步函数更新Formik字段
从表单外的异步函数更新Formik字段
提问于 2022-11-25 10:49:10
我有一个实现simle表单的组件。该组件还具有通过单击LeafletJS映射生成的事件的侦听器。当事件处理程序被调用时，我希望能够更新lat和lng字段，这样就可以通过单击映射而不是直接输入值来填充它们。
import React, { useEffect } from 'react';
import { Formik, Form, Field } from 'formik';
const FormComponent = () => {
const onMapClick = e => {
console.log(e.detail.lat, e.detail.lng);
};
useEffect(() => {
document.addEventListener('map:click', onMapClick);
return () => {
document.removeEventListener('map:click', onMapClick);
};
}, []);
return (
<Formik
initialValues={{ username: 'guest', lat: 50.447243, lng: 30.524933 }}
onSubmit={values => { console.log(values); }}
>
{() => (
<Form id="test">
<Field type="text" name="username" />
<Field type="text" name="lat" />
<Field type="text" name="lng" />
<button type="submit">
Submit
</button>
</Form>
)}
</Formik>
);
};
export default FormComponent;我遇到了Formik setFieldValue函数，但这似乎只能从表单中访问。同样，我不能在表单函数中使用UseEffect。
通过更改初始值和使用enableReinitialize，我已经取得了一些成功，但这会重置其他字段，除非我跟踪所有字段并更新每个更改的初始值。
建议采取什么方法来解决这一问题？我应该补充的是，代码是一个经过删减的示例。真正的形式有更多的字段。
回答 1
Stack Overflow用户
发布于 2022-11-25 10:59:25
我就是这么做的。
假设您有带有form的组件、带有map的组件以及包含这两种组件的父组件。
我将在父组件中使用一些useState，它将处理选定的lat和液化天然气的更改，并将这些数据提供给我的表单。
然后，在表单中，我将使用useEffect，因此，每当这些数据被更改时，它就会在表单中使用setFieldValue。
所有这些内容都将类似于(抽象示例)：父组件
const [coords, setCoords] = useState(null)
return (
<>
<Form coords={coords} />
<Map onChange={setCoords} />
</>
)表格
useEffect(() => {
if(coords !== null) {
setFieldValue("lat", coords.lat)
setFieldValue("lng", coords.lng)
}
}, [coords])这应该有效，因为setFieldValue可以在每一刻，甚至在初始化之后，为字段设置值。我不知道您在useEffect和setFieldValue方面有什么问题，所以如果我的回答没有帮助您，请提供更多的代码示例
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74571649
复制相关文章
相似问题
腾讯云开发者
