首页
学习
活动
专区
工具
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/>的名称相匹配,键值为初始值/默认值。

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

相关·内容

  • 【深入浅出C#】章节 2:数据类型和变量:变量和常量的声明和初始化

    变量在程序中扮演着重要的角色。它们用于存储和操作数据,为程序提供了灵活性和可扩展性。通过变量,我们可以方便地存储和访问不同类型的数据,如整数、浮点数、字符串等。变量还允许数据在程序的不同部分之间进行传递和共享,实现数据的交流和共享。同时,变量也用于对数据进行各种操作和计算,如算术运算、逻辑判断等,实现对数据的处理和转换。此外,变量还可以用于跟踪程序的状态和条件,根据不同的条件执行不同的操作或决策,实现程序的流程控制和逻辑控制。变量的可变性和灵活性使得程序的行为可以随着变量的值的改变而调整,满足不同的需求和条件。合理地管理变量可以提高程序的内存利用率,避免内存泄漏和资源浪费。因此,了解变量在程序中的作用和重要性对于设计和编写高质量、高效率的程序至关重要。

    02
    领券