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

如何在react-final-form字段名中动态添加对象?

在react-final-form中动态添加对象到字段名中,可以通过使用FieldArray组件来实现。FieldArray是react-final-form提供的一个组件,用于处理动态字段数组。

首先,需要在表单组件中引入FieldArray组件,并在表单组件的render方法中使用FieldArray组件来渲染动态字段数组。

代码语言:txt
复制
import { Form, Field } from 'react-final-form';
import { FieldArray } from 'react-final-form-arrays';

const MyForm = () => (
  <Form
    onSubmit={onSubmit}
    render={({ handleSubmit }) => (
      <form onSubmit={handleSubmit}>
        <FieldArray name="myArray">
          {({ fields }) =>
            fields.map((name, index) => (
              <div key={name}>
                <Field
                  name={`${name}.fieldName`}
                  component="input"
                  type="text"
                  placeholder="Field Name"
                />
                <Field
                  name={`${name}.fieldValue`}
                  component="input"
                  type="text"
                  placeholder="Field Value"
                />
                <button type="button" onClick={() => fields.remove(index)}>
                  Remove
                </button>
              </div>
            ))
          }
        </FieldArray>
        <button type="button" onClick={() => fields.push({})}>
          Add Field
        </button>
        <button type="submit">Submit</button>
      </form>
    )}
  />
);

在上述代码中,我们使用FieldArray组件来渲染名为"myArray"的动态字段数组。通过fields.map方法,我们可以遍历数组中的每个字段,并为每个字段渲染一个输入框。输入框的name属性使用${name}.fieldName${name}.fieldValue的形式,其中${name}表示当前字段的名称,".fieldName"和".fieldValue"表示字段中的属性名称。

通过点击"Add Field"按钮,可以动态地添加新的字段到数组中。点击"Remove"按钮可以删除对应的字段。

这样,我们就可以在react-final-form字段名中动态添加对象了。

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

相关·内容

领券