Question

通过以下示例，我一直在努力创建一个动态表单，每行包含多个输入元素。 https://ant.design/components/form/#components-form-demo-dynamic-form-item

我在尝试以下代码时遇到以下错误： 对象作为React子对象无效（找到：带有键{name，email}的对象）

const formItems = keys.map((k, index) => {
  return (
    <React.Fragment>
    <FormItem
      {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
      label={index === 0 ? 'Passengers' : ''}
      required={false}
      key={`${k}-name`}
    >
      {getFieldDecorator(`passengers[${k}].name`, {
        validateTrigger: ['onChange', 'onBlur'],
        rules: [{
          required: true,
          whitespace: true,
          message: "Please input passenger's name or delete this field.",
        }],
      })(
        <Input placeholder="passenger name" style={{ width: '60%', marginRight: 8 }} />
      )}
    <FormItem
      {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
      label={index === 0 ? 'Passengers' : ''}
      required={false}
      key={`${k}-email`}
    >
      {getFieldDecorator(`passengers[${k}].email`, {
        validateTrigger: ['onChange', 'onBlur'],
        rules: [{
          required: true,
          whitespace: true,
          message: "Please input passenger's name or delete this field.",
        }],
      })(
        <Input placeholder="passenger name" style={{ width: '60%', marginRight: 8 }} />
      )}
    </FormItem>
    </React.Fragment>
  );
});

Answer 1

在您做的2个地方：

num

仅当这些对象具有您所有布局所在的<FormItem {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}键时，此方法才起作用，否则，您可能无意在此处编写了键？像这样显式设置样式可能更安全：

style

通过这种方式，<FormItem style={index === 0 ? formItemLayout : formItemLayoutWithOutLabel}对象可以包含平面样式，没有覆盖其他FormItem道具的危险。

Ant设计动态表单集合

1 个答案: