为<FieldArray/>使用的数组设置初始值/默认值的方法是通过 initialValues 属性来实现。initialValues 属性接受一个对象作为参数,该对象的键名与 <FieldArray/> 的名称相匹配,键值则是初始值/默认值。
下面是一个示例代码:
import { Formik, FieldArray } from 'formik';
const initialValues = {
// 设置初始值/默认值为空数组
fieldName: []
};
const MyForm = () => {
return (
<Formik initialValues={initialValues}>
{({ values }) => (
<FieldArray name="fieldName">
{({ push }) => (
<div>
{/* 添加按钮用于推送新的值到数组 */}
<button type="button" onClick={() => push('')}>
Add Value
</button>
{/* 渲染数组中的每个值 */}
{values.fieldName.map((value, index) => (
<div key={index}>
<input
type="text"
name={`fieldName[${index}]`}
value={value}
/>
{/* 删除按钮用于从数组中删除值 */}
<button type="button" onClick={() => values.fieldName.splice(index, 1)}>
Remove Value
</button>
</div>
))}
</div>
)}
</FieldArray>
)}
</Formik>
);
};
在上述示例中,通过将 initialValues 对象传递给 Formik 组件的 initialValues 属性来设置初始值/默认值。对象的键名 "fieldName" 与 <FieldArray/> 的名称相匹配,键值是初始值/默认值,这里设置为空数组。在 FieldArray 内部,使用 values 属性访问表单的当前值,并使用 map 方法遍历数组,渲染每个值的输入框。添加按钮通过 push 方法将新的值推送到数组中,删除按钮通过 splice 方法从数组中删除指定的值。
总结起来,为<FieldArray/>使用的数组设置初始值/默认值需要通过 initialValues 属性来实现,该属性接受一个对象作为参数,对象的键名与<FieldArray/>的名称相匹配,键值为初始值/默认值。
领取专属 10元无门槛券
手把手带您无忧上云