首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何为<FieldArray/>使用的数组设置初始值/默认值?

为<FieldArray/>使用的数组设置初始值/默认值的方法是通过 initialValues 属性来实现。initialValues 属性接受一个对象作为参数,该对象的键名与 <FieldArray/> 的名称相匹配,键值则是初始值/默认值。

下面是一个示例代码:

代码语言:txt
复制
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/>的名称相匹配,键值为初始值/默认值。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券