FieldArray 是 ReactJS 表单库 Formik 中的一个组件,用于处理动态字段数组。它允许我们根据条件动态地呈现字段。
在 FieldArray 中,我们可以使用 map 函数来遍历字段数组,并根据条件渲染相应的字段。以下是一个示例代码:
import { Formik, Field, FieldArray } from 'formik';
const MyForm = () => {
return (
<Formik
initialValues={{ fields: [] }}
onSubmit={(values) => {
// 处理表单提交逻辑
}}
>
{({ values }) => (
<form>
<FieldArray name="fields">
{({ push, remove }) => (
<div>
{values.fields.map((field, index) => (
<div key={index}>
<Field name={`fields[${index}]`} />
{field === 'condition' && (
<Field name={`fields[${index}].additionalField`} />
)}
<button type="button" onClick={() => remove(index)}>
删除字段
</button>
</div>
))}
<button type="button" onClick={() => push('')}>
添加字段
</button>
</div>
)}
</FieldArray>
<button type="submit">提交</button>
</form>
)}
</Formik>
);
};
export default MyForm;
在上面的示例中,我们使用 FieldArray 组件来处理名为 "fields" 的字段数组。通过 map 函数遍历数组中的每个字段,并根据条件渲染相应的字段。在这个例子中,如果字段的值为 "condition",则会呈现一个额外的字段。
这是一个简单的示例,你可以根据自己的需求进行扩展和修改。如果你想了解更多关于 FieldArray 的用法和参数,可以参考 Formik 官方文档中的相关部分:FieldArray - Formik。
希望这个答案能够帮助到你!如果你对其他问题有任何疑问,请随时提问。
领取专属 10元无门槛券
手把手带您无忧上云