[英]Dynamically add fields to Formik form
我需要一種在 for 循環中將字段添加到 Formik 表單的方法。 我已經閱讀了 FieldArray 組件的文檔,但我並不真正了解如何使用它。 這是我當前的代碼:
function generate(values) {
for (let i = 0; i < 10; i++) {
values.test.push({
hello: "world"
})
}
}
return (
<div>
<Formik initialValues={{test: []}}/>
{(values)=>(
<Form>
<FieldArray>
{()=>generate(values)}
<p>{JSON.stringify(values)}</p>
</FieldArray>
</Form>
)}
</div>
)
目前,它只顯示一個空白頁面。 甚至沒有錯誤消息。
您上面的代碼不起作用的原因是因為您正在<Formik />
之外調用字段數組和表單
它應該是:
<Formik render={({ values }) => (
<Form>
<FieldArray />
</Form>
)/>
並不是:
<Formik initialValues={{test: []}} />
<Form>
<FieldArray />
</Form>
你可以在這里看到一個更清晰的例子: https://codesandbox.io/s/1o8n593z6q
您可以只使用setValues
動態添加或刪除表單 formik 的字段。
這是一個可能有幫助的代碼示例
<Formik initialValues={{} as Record<string, any>} onSubmit={() => {}}>
{({values, setValues}) => (
<Form>
{customers.map(e => (
<Component
name={e.firstName}
customerId={e.customerId}
onClick={() => {
// @ts-ignore
if (values?.[e.customerId])
setValues(prev => _.omit(prev, e.customerId));
else {
setValues({...values, [e.customerId]: e});
}
}}
// @ts-ignore
isSelected={values?.[e.customerId]}
/>
))}
{Object.values(values).map(v => (
<h5 style={{color: 'red'}}>{v.firstName}</h5>
))}
</Form>
)}
</Formik>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.