Formik是一个用于构建表单的React库。要从数组中设置初始值,可以使用Formik的initialValues属性。
首先,确保你的表单字段名称与数组中的元素名称相匹配。然后,创建一个包含数组元素的初始值对象,并将其传递给Formik组件的initialValues属性。
以下是一个示例:
import React from 'react';
import { Formik, Field, Form } from 'formik';
const initialValues = {
arrayField: ['value1', 'value2', 'value3']
};
const MyForm = () => (
<Formik initialValues={initialValues} onSubmit={values => console.log(values)}>
<Form>
<Field name="arrayField[0]" />
<Field name="arrayField[1]" />
<Field name="arrayField[2]" />
<button type="submit">Submit</button>
</Form>
</Formik>
);
export default MyForm;
在上面的示例中,我们创建了一个名为arrayField
的数组字段,并将其初始值设置为['value1', 'value2', 'value3']
。然后,我们在表单中使用Field
组件来渲染每个数组元素的输入框,并通过name
属性指定了数组元素的索引。
这样,表单将会被初始化为包含数组中元素的初始值。当提交表单时,可以通过onSubmit
回调函数获取表单的值。
腾讯云相关产品和产品介绍链接地址:
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云