[英]Ant Design Dynamic Form Collection
通过遵循此示例,我整天都在努力创建动态表格,每行中都有多个输入元素。 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>
);
});
在您做的2个地方:
<FormItem
{...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
仅当这些对象具有所有布局都位于其下的style
键时,这才起作用,否则,您可能无意在此处编写了一个键? 像这样显式设置样式可能更安全:
<FormItem
style={index === 0 ? formItemLayout : formItemLayoutWithOutLabel}
这样, formItemLayout
对象可以包含平面样式,没有覆盖其他FormItem道具的危险。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.