项目里用了ant-design
问题:红色框框是点击新增以后出来的表单
对应的 我应该怎么设计这个返回的表单的k值?也没办法包在一个父级的话= =
const keys = getFieldValue('keys');
let _title = actionType != "edit" ? "新增属性" : "编辑属性";
const formItems = keys.map((k, index) => {
return (
<div>
<FormItem
label= {'属性名'}
required={false}
key={k}
style={{ width:'50%', display:'inline-block'}}
>
{getFieldDecorator(`names-${k}`, {
validateTrigger: ['onChange', 'onBlur'],
rules: [{
required: true,
whitespace: true,
message: "请输入属性名称",
}],
})(
<Input placeholder="请输入属性名称" style={{ width: '60%', marginRight: 8 }} />
)}
</FormItem>
<FormItem
label= {'属性名'}
required={false}
key={index++}
style={{ width:'50%', display:'inline-block'}}
>
{getFieldDecorator(`names-${k}`, {
validateTrigger: ['onChange', 'onBlur'],
rules: [{
required: true,
whitespace: true,
message: "请输入属性名称",
}],
})(
<Input placeholder="请输入属性名称" style={{ width: '60%', marginRight: 8 }} />
)}
{keys.length > 0 ? (
<Icon
className="dynamic-delete-button"
type="minus-circle-o"
disabled={keys.length === 0}
/>
) : null}
</FormItem>
</div>
);
});
我这里用k和index++。。。,
= =
这个是 react 在开发环境下会报的一个 warning ,目的是给循环的元素一个唯一索引,进而判断元素是否需要更新。
在你的代码中,把这个 key 加到最外层的 div 上,就可以了。